Introduction

This article presents an example of using the jQuery validation plug-in.

Background

The jQuery "Validation Plug-in" is an excellent tool for web pages to validate data entries at the client side using JavaScript. Unfortunately though, it is not easy to find a complete working example of how to use it. This article presents an example to use the jQuery Validation Plug-in. I have tested the example in IE8, Google Chrome, Firefox, and Safari. This example does not run well in IE7 and below. This small article assumes that you have some basic knowledge of jQuery and how to use it. If you are new to jQuery, you can easily find a lot of information on how to use it over the internet.

* Quick note #1: The attached example does not work well in IE7. This is because the "jquery.validate.min.js" that I used in this example is version 1.5.5. After I finished the article, I found that if you use a newer version "1.8.1", it should work in IE7. You can download the version "1.8.1" from here. - 6/19/2011

* Quick note #2: Some readers found out that the example does not work on IE at all. It is true after my own test on another computer (not sure why it worked on IE8 in my first test). But if you replace the "1.5.5" version "jquery.validate.min.js" with the version "1.8.1", my test shows that the example also works in IE. I will re-upload a copy using "1.8.1". Thanks for the feedback. - 6/20/2011

* Quick note #3: Uploaded another copy of the example in the "jQueryValidationExample1.8.1.zip" file. It uses the "1.8.1" version of "jquery.validate.min.js". My tests show that it works on IE7+, Chrome, Safari, and Firefox. If you are interested, you can download both versions and see the difference. Thanks to the readers who pointed out the problems. - 6/20/2011

The Example Visual Studio Solution

The structure of the attached Visual Studio 2010 solution is as follows:

The Validation Plug-in relies on jQuery and jQuery UI to work, so I included the jquery-1.6.1.min.js file from jQuery and the jquery-ui-1.8.13.custom.min.js file from jQuery UI in the Scripts folder. The ui-lightness folder and its contents in the Styles folder are the Style Sheet and the image resources used by jQuery UI. They come with the same download package when you download the "jquery-ui-1.8.13.custom.min.js" file. The "jquery.validate.min.js" file is the jQuery Validation Plug-in. The version used in this example is 1.5.5.

The code that I wrote for this example is in the following files:

The Example.htm file is the example HTML page to use the jQuery Validation Plug-in through the JavaScript class created in the jquery.validate.wrapper.js file.

The jquery.validate.wrapper.js file implements a simple JavaScript function that wraps jQuery UI for this example. This function will be used as an Object Oriented class during validation. Object Orientation is not fully supported in JavaScript, but we can somehow simulate it to a certain degree. If you are interested, you can take a look at this link.

The Site.css file has a simple CSS class that is used to highlight the input controls that fail validation.

I will first introduce the "Example.htm" page and then introduce the JavaScript class in "jquery.validate.wrapper.js". At last, I will introduce the CSS class in the Site.css file.

This HTML file has three text boxes and a button. The purpose of this example is to validate the content in the text boxes when the button is clicked. To set up the validation, we need to go through three steps in the $(document).ready event.

Prepare the validation rules and the messages to show if the validation fails.

Create a validator object by passing the ID of the HTMl Form that contains the text boxes to the jQueryValidatorWrapper function. The validation rules and messages are also passed to this function. The jQueryValidatorWrapper function is implemented in the jquery.validate.wrapper.js file.

Hook up the click event for the button to start validation.

This piece of code is pretty simple, but you should pay some attention to the following:

All the required JavaScript files and style sheets need to be referenced properly.

All the text boxes need to have a "name" attribute. The validation rules and messages are associated with the name attribute.

All the text boxes to be validated need to be in the HTML Form that is used to create the validator object.

Now let us take a look at the jQueryValidatorWrapper function.

The jQuery Validation Wrapper

The jQueryValidatorWrapper function is implemented in the jquery.validate.wrapper.js file:

It first creates a div element and appends it to the DOM. It makes sure that the ID of the div element is unique in the web page. This div element will be used as a dialog box to display the error messages if the validation fails.

The CSS to Highlight the Failed Input Element

If the validation fails a textbox, we need to highlight it. The CSS class used to highlight the HTML element is implemented in the Site.css file.

.error
{
border-color:red;
border-style:solid;
border-width:1px;
}

The jQuery Validation Plug-in will look for the .error class to apply styles to failed HTML elements. You can implement this CSS class to highlight the failed elements whatever way you want. In this example, if a text box fails validation, I will simply give it a red border.

Run the Example

Now that we have finished reviewing the code, we can test run the web page. Set the Example.htm file as the start up page; we can debug and run the application in Visual Studio.

When the web page first loads, we can see the three text boxes and the Validate button.

Without typing anything in the text boxes and clicking the Validate button, the validation will fail all the three text boxes. The text boxes are highlighted with red borders and a dialog box shows up asking us to correct the problems.

After closing the dialog box, we can type something into the text boxes. You may notice that when the text in a text box becomes valid, the red border disappears.

If we give all the three text boxes valid texts, clicking the Validate button shows up the message box telling us that the validation was successful.

Points of Interest

This article presented an example of using jQuery Validation Plug-in.

You may have noticed that I insert a div element into the DOM in the jquery.validate.wrapper.js file when I initiate the validator. This div element will be given an ID in the form of "V_dia_log1???..". If you accidentally have an HTML element having an ID of the same pattern in your web page, the jQueryValidatorWrapper function will eventually find a unique ID for the div element, but it may take some time. If you want to use jquery.validate.wrapper.js as it is in your applications, you should avoid assigning any element in the page an ID of the same pattern.

I have tested the example in IE8, Google Chrome, Firefox, and Safari. This example does not run well in IE7 and below. My test is limited though. If you find anything interesting in your own test, please do not hesitate to let me know and I will appreciate it.

The attached example does not work well in IE7. It is because the jquery.validate.min.js that I use in this example is version 1.5.5. After I finished the article, I found that if you use a newer version 1.8.1, it should work in IE7. You can download the version 1.8.1 from here.

I hope you like my postings and I hope this article can help you one way or the other.

I have used JQuery validation plugin in the ASP.NET 1.1. framework and it works.
The only issue is that Web Forms automatically changes your ids of elements (e.g. add some prefix) so you cannot reference elements directly. However, in the .Net 4.0 you can use static ids where framework do not changes an id of the element. In older frameworks you can add rules directly in the classes.
These are minor tweaks so it works fine in any language.

Rather than just saying "You can use it in asp.net (and I agree)", why not show how to return the asp.net control ClientID with jQuery?
Personally, I give this article a vote of 5 because it was well presented.

Use <%= control.ClientID %> in place of control.

Example:
In ASP.NET,
If txtBox1 is the ID of your server control, then
$('#txtBox1')
can be replaced with:
$('#' + '<%= txtBox1.ClientID %>')