Matthew Jones

One of the more useful things MVC includes is Unobtrusive Validation with the usage of the jQuery Validate plugin and the Unobtrusive library. This lightweight library allows us to add validation to our MVC views without any additional client-side coding; we only have to use attributes like RequiredAttribute and RangeAttribute and include the correct script files.

In this post, we'll take a look at a simple example of how to use Unobtrusive Validation, and break down how it actually works.

What Does "Unobtrusive Validation" Mean?

It means that we can implement simple client-side validation without writing a ton of validation code, and that we can improve the user experience simply by adding the appropriate attributes and including the appropriate script files.

Consider the following view model (we will use this in the sample project):

This class is already set up to handle server-side validation using attributes. Unobtrusive Validation allows us to take the already-existing validation attributes and use them client-side to make our user experience that much nicer.

The Unobtrusive script files are included automatically with new MVC projects in Visual Studio, but if you don't have them you can get them from NuGet.

We need three sets of files to implement Unobtrusive:

The jQuery library

The jQuery Validate plugin

The Unotrusive extensions to Validate

Once we've got those, we can add unobtrusive validation to any page by simply including those script files on that page. Even better, we can use MVC's bundling feature to just create and use a bundle, which is what happens by default in a new MVC app:

data-val-required is the error message to be displayed if a value is not provided.

data-valmsg-for is the name of the input associated to the error message(s) being displayed.

data-valmsg-replace specified whether error messages are to be replaced within this element.

This is part of the magic of Unobtrusive: it uses HTML5-compatible "data-" attributes to store all of the information it needs to perform validation. This is why you don't need to use any other code besides attributes to enable client-side validation with this library.

Of course, so far all the validation we've been doing so far in this demo has been server-side. To enable client-side validation, we have to include the "jquery.validate.unobtrusive" bundle in our view. In our sample project, we have another view that shows how this could work:

The only difference between the ServerSide view and the Unobtrusive view is the inclusion of the jqueryval bundle on the latter.

What we will see now is that with the script included and the ClientValidationEnabled property set, the validation will fire client-side in addition to server-side. This means that the browser doesn't make a round-trip to the server on validation failure, and that the user gets a nicer experience out of it.

Client-Side vs Server-Side Validation - Do We Need Both?

Absolutely! In fact, we only actually need server-side validation, since client-side can be disabled by the browser. However, handling both scenarios provides a nice graceful degredation where the user will still get the validation they need, in the nicest way their browser provides.

Check out the sample project on GitHub, and let me know what you think about this demo in the comments!