[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

Custom Validation styles along with MVC3 Data Annotations

Posted on 2011-10-20
7
Medium Priority
?
398 Views
Last Modified: 2012-05-12
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.
0
Comment
Question by:newbieweb
  • 4
  • 3
7 Comments
 
LVL 9

Accepted Solution

by:
gery128 earned 1500 total points
ID: 37004791
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
 

Author Comment

by:newbieweb
ID: 37009939
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
 
LVL 9

Expert Comment

by:gery128
ID: 37011488
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
NEW Veeam Agent for Microsoft Windows

Backup and recover physical and cloud-based servers and workstations, as well as endpoint devices that belong to remote users. Avoid downtime and data loss quickly and easily for Windows-based physical or public cloud-based workloads!

 

Author Comment

by:newbieweb
ID: 37011498
I ajm not asking where to change it, I am talking about how to assign it to a given control when validation fails.
0
 
LVL 9

Expert Comment

by:gery128
ID: 37011548
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
 

Author Comment

by:newbieweb
ID: 37011631
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
 

Author Closing Comment

by:newbieweb
ID: 37015204
Thanks...
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Calculating holidays and working days is a function that is often needed yet it is not one found within the Framework. This article presents one approach to building a working-day calculator for use in .NET.
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
This lesson discusses how to use a Mainform + Subforms in Microsoft Access to find and enter data for payments on orders. The sample data comes from a custom shop that builds and sells movable storage structures that are delivered to your property. …
Is your OST file inaccessible, Need to transfer OST file from one computer to another? Want to convert OST file to PST? If the answer to any of the above question is yes, then look no further. With the help of Stellar OST to PST Converter, you can e…
Suggested Courses

872 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question