MVC Validation – Part 4 – Styling the Validation Controls

06 Jul

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


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: