What is Unobtrusive MVC Client Validation and How it works?

The MVC Client Validation model uses unobtrusive javascript to check the user input at the browser side. Using this feature you can create elegant MVC webpages where the HTML markup appears clear clean by its own, with no javascript codes embedded into it. All that's required is to declare at the MVC Model what are the Business Rules concerning each of the input fields. 
This way, not only we have a neat distinction between the Business Logic which resides in the Model, and the Presentation Layer dwelling at the View, but also we got simplified markup with no javascript validation code at all.
To achieve that, we keep the following  steps:
1) load the validation javascript files 
2) enable unobtrusive javascript at the web.config (or the View(or even programatically))
3) define all business logic as Data Annotations at the Model

In a few words, when we talk about unobtrusive javascript we mean that the scripts are not shown at all at the HTML markup level: all scripts reside in different files, and the markup contains just the HTML elements and it attributes, setting a clear separation between presentation and javascript code.
Using this MVC Client Validation mode, we have client side validation of a web form as this:

The validation will be showed this way:

VALIDATING A WEB FORM WITH UNOBTRUSIVE JAVASCRIPT

In order to validate this form, all we have to do is to follow this steps:

1) load the validation javascript files 

The client side validation is done by the jquery.validate* files : 

we need to have them defined at the BundleConfig.cs file: 

and then imported at our webpage:

2) enable unobtrusive javascript at the web.config (or the View(or even programatically))

We must enable client validation at the web.config:

Or elsewhere at the MVC View, as a per-page validation:

3) define all business logic as Data Annotations at the Model

Finally, we declare the validation rules at the Model, using Data Annotations:

And that's all: the data annotations will be translated by the MVC engine to attributes appended to the input controls as "data-val-*" :

As you can see at the html source of the MVC View, the "Title" field of our example gets the following validation attributes:

data-val="true" : means that this input control must be validated: the submit button will not be enabled
                                 until it's valid

data-val-length : if this attribute is present, its value represents a message to display if the length is not legal

data-val-required :  if this attribute is present, its value is the message to be displayed if no input was typed

data-val-length-min : if this attribute is present, its value is the message to be displayed if the input typed does not reaches the minimal length

data-val-length-max :  if this attribute is present, its value is the message to be displayed if the input typed is bigger than the maximal length

There are more Data Annotations, such as Editable, Compare, EmailAddress, Display, Phone, Range, RegularExpression, StringLength, Timestamp, Url, UIHint, or CustomValidation. In the MSDN website you can go deep inside Data Annotations. 

If you liked the appearance of this web form, a short tutorial on creating a rich form with the Twitter Bootstrap can be found here .  

Happy programming....

        By Carmel Schvartzman

עריכה: כרמל שוורצמן