Custom Validation styles along with MVC3 Data Annotations

I want to use the standard ASP.NET Data Annotations to show the user errors like:

"Name is a required field".

But I also want to use CSS to give that field some custom CSS styling.

How can I do this? I assume that since the validation is takling place on the Model, that the correct CSS could also generated as a property on the Model?

Please tell me if that's the best way and give me a few hints about how to do this.

Thanks.
newbiewebSr. Software EngineerAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

 
gery128Commented:
You just need to override CSS classes.

Like,
 input.input-validation-error

 {

     background-color: yellow;

 }

See this links:
http://www.jstawski.com/archive/2011/05/12/asp.net-mvc3-change-validation-class.aspx

http://stackoverflow.com/questions/5466394/asp-net-mvc-validation-styles-coloring-instead-of-asterisks
0

Experts Exchange Solution brought to you by ConnectWise

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
 
newbiewebSr. Software EngineerAuthor Commented:
The how do youi add that input.input-validation-error clas on error? The great thing about using Data Annotations is you define the range, for example, and ASP.NET handle the rest.

I like this behavior, but I wanted to augment it, not replace it completely.

But I am curious since your method could do exactly that. But where do I add that class you defined? The Razor file? The ViewModel?

Thanks.
0
 
gery128Commented:
the css class you need to change is you can locate in your mvc application's Content folder under that Style. Where you will find your default (microsoft generated) template of css
0
Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

 
newbiewebSr. Software EngineerAuthor Commented:
I ajm not asking where to change it, I am talking about how to assign it to a given control when validation fails.
0
 
gery128Commented:
when you change that css file it will be applicable for all your validation style. no need to change it individually for each control.
0
 
newbiewebSr. Software EngineerAuthor Commented:
How do you assign a given control a value of :

input.input-validation-error

??

I do not see how you are proposing doing validation, then adding the above class. I would like to see some simple code that verifies the text field contains an integer value that is odd, not even. If the value is not integer, and not off, it's an error. How do I do the validation, since your links said I should take out the ASP.NET built-in validation. Then, how do I add the class input.input-validation-error??

0
 
newbiewebSr. Software EngineerAuthor Commented:
Thanks...
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.