Recently I spent some time prototyping my own validation for ASP.NET MVC. Why did not I reuse any of existing solutions? This is a story for another post so I did not want to bring this topic up now. One of the things which I had to figure out during prototyping was how to implement client side validation. Of course I wanted to utilize capabilities of some well known JavaScript framework (no I am not so crazy to write it for my own). I made small evaluation comparing available options and at the end I decided to incorporate jQuery and its Validation plugin. One of the things which were crucial to my decision was ability of this framework to use metadata stored as JSON in class attribute of HTML element. The concept of metadata available in jQuery is amazing and gives possibility to describe validation rules for specified input control inside itself. In my case this was very important feature because I wanted to render validation using my custom HtmlHelper extensions together with corresponding input controls. Second thing which convinced me to jQuery Validation was easy setup which I want to show you now.

If you want to use jQuery Validation in your project first of all you will need of course jQuery library which can be downloaded here, jQuery Metadata plugin which is available here and jQuery Validation plugin downloadable from here.

When you collected all required prerequisites you have to add reference to them in your HTML. Simply add code shown below to the body of tag but remember to ensure that paths lead to place where JavaScript files are located.

<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jquery.validate.min.js"></script>
<script type="text/javascript" src="jquery.metadata.js"></script>

When jQuery libraries are already where they should be you can specify validation rules using metadata. In order to do it extend your input control tag with class attribute and set its value to {required:true}. This will tell Validation plugin that this specified input control should contain a value before it can be send back to server. Of course this is very simple rule but below I have listed few more, complex definitions.

<input class="{required:true, maxlength:100, messages:{required:'This field is required.', maxlength:'This field can contain maximum 100 characters.'}}" />
<input class="{maxlength:50, email:true, equalTo:'#Email',  messages:{required:'This field is required.', maxlength:'This field can contain maximum 100 characters.', email:'This is not a valid email.', equalTo:'Value entered in this field should equal to value of Email field.'}}" />

Listing below shows this validation metadata in wider context.

<form id="MyForm" method="post" action="/Registration">
    <label for="DisplayName">Username:</label>
    <input id="DisplayName" class="{required:true, maxlength:100, messages:{required:'This field is required.', maxlength:'This field can contain maximum 100 characters.'}}" type="text" name="DisplayName" />
    <input value="Submit!" type="submit" />
</form>

At the end when you have defined all validation rules only thing you should do is adding following code after closing tag and that is it.

<script type="text/javascript">
    $("#MyForm").validate({
        errorElement: "span"
    });
</script>

Now when you will click Submit! button your form will be validated and in case of errors apropriate messages will be displayed below corresponding input control.

Because I know that described example can be not enough to fully understand how all it works I have prepared more complex, example form which can be downloaded from here: download.