Click here to Skip to main content
13,803,505 members
Click here to Skip to main content
Articles » Web Development » Ajax » Samples » Revisions
Add your own
alternative version

Tagged as


75 bookmarked
Posted 18 Jun 2011
Licenced CPOL

An Example to Use jQuery Validation Plugin

, 20 Jun 2011
Rate this:
Please Sign up or sign in to vote.
This article presents an example to use jQuery validation plugin.
This is an old version of the currently published article.

Download - 135.06 KB

Download - 134.92 KB


This article presents an example to use jQuery validation plugin. 


The "jQuery" "Validation Plugin" is an excellent tool for web pages to validate the data entries at the client side using javascript. Unfortunately though, it is not easy to find a complete working example on how to use it. This article is to present an example to use "jQuery Validation Plugin". 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 in "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. It 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/2010

* Quick note #2: Some readers found out that the example does not work on IE. It is true after my own test on another computer (not sure why it worked on IE8 at 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/2010

* Quick note #3: Uploaded another copy of the example in the "" file. It uses the "1.8.1" version of the "jquery.validate.min.js". My test shows 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 point out the problems. - 6/20/2010

The Example Visual Studio Solution 

The structure of the attached visual studio 2010 solution is the following:


The "Validation Plugin" 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 the "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 Plugin". 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 "jQuery Validation Plugin" 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 the "jQuery UI" for this example. This function will be used as an "Object Oriented" class during the validation. The "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 fails the validation.

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

The "Example.htm" File  

The "Example.htm" file is implemented as the following: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

<html xmlns="">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery Validation Example</title>
    <link href="Styles/ui-lightness/jquery-ui-1.8.13.custom.css"

        rel="stylesheet" type="text/css" />
    <link href="Styles/Site.css" rel="stylesheet" type="text/css" />
    <script src="Scripts/jquery-1.6.1.min.js" type="text/javascript"></script>
    <script src="Scripts/jquery-ui-1.8.13.custom.min.js" type="text/javascript"></script>
    <script src="Scripts/jquery.validate.min.js" type="text/javascript"></script>
    <script src="Scripts/jquery.validate.wrapper.js" type="text/javascript"></script>
<script type="text/javascript" language="javascript">
    $(document).ready(function () {
        // 1. prepare the validation rules and messages.
        var rules = {
            textbox1: {
                required: true,
                minlength: 2
            textbox2: "required",
            textbox3: "required"
        var messages = {
            textbox1: {
                required: "textbox1 is required",
                minlength: "textbox1 needs to be at least length 2"
            textbox2: "textbox2 is requried",
            textbox3: "textbox3 is required"
        // 2. Initiate the validator
        var validator
            = new jQueryValidatorWrapper("FormToValidate",
                rules, messages);
        // 3. Set the click event to do the validation
        $("#btnValidate").click(function () {
            if (!validator.validate())
            alert("Validation Success!");
<form id="FormToValidate" action="#">
            <input type="text" id="textbox1" name="textbox1" />
            <input type="text" id="textbox2" name="textbox2" />
            <input type="text" id="textbox3" name="textbox3" />
            <input type="button" id="btnValidate"

                style="width: 100%" value="Validate" />

This html file has three text boxes and one 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 the 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 to 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:

var dialogIdSeed = 1000000000;
function jQueryValidatorWrapper(formId, rules, messages) {
    // Get an Id for the "<div>" to diaply the error messages.
    // The Id is made sure to be unique in the web page.
    var dialogId = "V_dia_log" + dialogIdSeed++;
    while ($("#" + dialogId).length != 0) {
        dialogId = "V_dia_log" + dialogIdSeed++;
    // create the error message "div" and add it to the dom.
    // it will be use to display the validation error messages.
    var dialogText = "<div id='" + dialogId
            + "' title='Please correct the errors ...'>"
            + "<ul /></div>";
    var $dialog = $("#" + dialogId);
    var $ul = $("#" + dialogId + ">ul");
        autoOpen: false,
        modal: true,
        close: function (event, ui) {
    // hook up the form, the validation rules, and messages with jQuery validate.
    var showErrorMessage = false;
    var validator = $("#" + formId).validate({
        onchange: true,
        rules: rules,
        messages: messages,
        errorPlacement: function (error, element) {
            if (showErrorMessage) {
                var li = document.createElement("li")
        showErrors: function (errorMap, errorList) {
            if ((errorList.length != 0) && showErrorMessage) {
    // This is the function to call whem make the validation
    this.validate = function () {
        showErrorMessage = true;
        var result = validator.form();
        showErrorMessage = false;
        return result;

The "jQueryValidatorWrapper" function does the following:

  • 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.
  • It hooks up the validation rules and messages with the "Html Form" that will be validated using the "jQuery Validation Plugin".
  • At last, it creates a function that starts the validation.

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.


The "jQuery Validation Plugin" 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 that you want. In this example, if a text box fails the validation, I will simply give it a red border.

Run the Example

Now we finish reviewing the code, we can test run the web page. Set the "Example.htm" file as the start up page, we can debug run the application in the 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 is successful.

Points of Interest 

  •  This article presented an example to use jQuery validation plugin.
  • You may notice that I will insert a "div" element into the "DOM" in the "jquery.validate.wrapper.js" file when you 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 the "jquery.validate.wrapper.js" as it is in your applications, you do better 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 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.
  • I hope you like my postings and I hope this article can help you one way or the other.


First revisoin: 6-18-2010.


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Dr. Song Li
United States United States
I have been working in the IT industry for some time. It is still exciting and I am still learning. I am a happy and honest person, and I want to be your friend.

You may also be interested in...


Comments and Discussions

Discussions on this specific version of this article. Add your comments on how to improve this article here. These comments will not be visible on the final published version of this article.
Questionthank u Pin
Member 96703996-Jun-17 3:36
memberMember 96703996-Jun-17 3:36 
QuestionUsing Master Page and JS File Working with Validation Control Pin
BallaviKrishna23-Jun-15 2:00
memberBallaviKrishna23-Jun-15 2:00 
QuestionNot working with updatepanel Pin
sushiljadhav18-Mar-15 22:39
membersushiljadhav18-Mar-15 22:39 
QuestionVoted 5 star Pin
Lei Zhong9-Sep-13 8:47
memberLei Zhong9-Sep-13 8:47 
GeneralMy vote of 5 Pin
Menon Santosh24-Jul-13 2:28
professionalMenon Santosh24-Jul-13 2:28 
QuestionProblems with DNN Pin
freedeveloper5-Mar-13 14:23
professionalfreedeveloper5-Mar-13 14:23 
GeneralMy vote of 5 Pin
Savalia Manoj M4-Jan-13 2:33
memberSavalia Manoj M4-Jan-13 2:33 
GeneralMy vote of 5 Pin
Fatih Aslantas23-Dec-12 23:56
memberFatih Aslantas23-Dec-12 23:56 
GeneralMy vote of 5 Pin
Tim Corey9-Jun-12 18:20
professionalTim Corey9-Jun-12 18:20 
Generalmy vote of 1 Pin
Member 812949025-May-12 16:47
memberMember 812949025-May-12 16:47 
Questionerror box for big size Pin
Tichakron16-May-12 6:37
memberTichakron16-May-12 6:37 
AnswerRe: error box for big size Pin
Dr. Song Li16-May-12 6:44
mvpDr. Song Li16-May-12 6:44 
GeneralRe: error box for big size Pin
Tichakron16-May-12 18:32
memberTichakron16-May-12 18:32 
GeneralRe: error box for big size Pin
Dr. Song Li16-May-12 18:48
mvpDr. Song Li16-May-12 18:48 
GeneralRe: error box for big size Pin
Tichakron16-May-12 19:09
memberTichakron16-May-12 19:09 
GeneralRe: error box for big size Pin
Dr. Song Li16-May-12 19:16
mvpDr. Song Li16-May-12 19:16 
GeneralRe: error box for big size Pin
Tichakron16-May-12 20:44
memberTichakron16-May-12 20:44 
Questionletter validation Pin
sreejithsnair15-May-12 0:54
membersreejithsnair15-May-12 0:54 
AnswerRe: letter validation Pin
Xitij Thool25-Aug-12 7:25
memberXitij Thool25-Aug-12 7:25 
GeneralMy vote of 4 Pin
AbdullaMohammad28-Feb-12 2:44
memberAbdullaMohammad28-Feb-12 2:44 
GeneralMy vote of 5 Pin
sobo12325-Feb-12 17:08
membersobo12325-Feb-12 17:08 
Suggestion5! Pin
Jovan Popovic14-Nov-11 13:41
memberJovan Popovic14-Nov-11 13:41 
GeneralMy vote of 2 Pin
AbdullaMohammad23-Aug-11 5:19
memberAbdullaMohammad23-Aug-11 5:19 
GeneralRe: My vote of 2 Pin
Dr. Song Li24-Aug-11 6:29
mvpDr. Song Li24-Aug-11 6:29 
GeneralRe: My vote of 2 Pin
Jovan Popovic14-Nov-11 13:48
memberJovan Popovic14-Nov-11 13:48 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Cookies | Terms of Use | Mobile
Web01 | 2.8.181215.1 | Last Updated 20 Jun 2011
Article Copyright 2011 by Dr. Song Li
Everything else Copyright © CodeProject, 1999-2018
Layout: fixed | fluid