MVC Validation – Part 4 – Styling the Validation Controls

• MVC Validation – Part 1 – Model Data Annotations
• MVC Validation – Part 2 – Custom Validation
• MVC Validation – Part 3 – Client-Side Validation

This is going to be a quick post but still worth mentioning.  Out of the box, there are 6 style classes that we can latch onto to style the validation we see on screen.

These are:

1. .field-validation-error
2. .field-validation-valid
3. .input-validation-error
4. .input-validation-valid
5. .validation-summary-errors
6. .validation-summary-valid

If you use the Visual Studio MVC 3 template to create your project you will notice a content folder which contains a style sheet called ‘Site.CSS’ This has a section for styling the validation helpers listed above.

Styles for the Validation Helpers as created in the Site.Css

So as a quick test let’s make some simple changes to the validation summary helper.  In its default state it may
look something like this:

Screen showing the Valdiation Summary

To change the validation summary we must modify the validation-summary-errors style, so lets make a few simple changes.

Modify the style in to look like:

Now re-run the application and force an error.  Your Validation Summary will look similar to this:

Validation Summary with modified style