Validation with jQuery validation plugin

I blogged about client validation using jQuery before. That was a basic validation. An imperative solution. To day I am going to use a declarative solution with jQuery validation plugin.

Why we use validation plugin?

Input validation is very common in our daily life software development. So every time when we submit some data from browser to server side there are some requirement to validate the data before processing or store at some external data sources like databases. Now we need to validate our data in two places. At the client end and the server end. Where server end validation is the real validation and client side validation is for performance. The main discussion today is related to client side validation. Client side validation is done using scripting languages like JavaScript. We know about client side validation using JavaScript and even jQuery. But the problem is every time we have to write almost common code to implement validation at the client side. So we need some more easy solution for this common task. jQuery has a validation plugin which is being used for validation. The syntax is easy, short, can be quickly implemented and declarative. That means we just instruct the plugin what we want to do, not how to do. The plugin is intelligent enough to implement the logic for us.

What we need to use the plugin?

jQuery validation plugin is build on jQuery library. So we need the jQuery core library in our project. Also we can use the jQuery library which is hosted online from Microsoft, Google or jQuery. After adding the jQuery core library we need to download the validation plugin from here and attach that in our web page along with core library. Now we are ready to go.

An example with jQuery validation plugin

Now its time to dirty our hands with some real jQuery validation plugin code. First I am going to create a new HTML web page in notepad and put some input text box to show the validation plugin. Also I am putting a submit button in the form. In this case I am not doing any server side validation. But in real application we should do that because client side validation is not reliable, one can easily turn off the JavaScript in browser and put some invalid data to the server.

Now attach the external jQuery core and jQuery plugin validation to our html page. We can validate a form field in two ways. Basic way and the more advance way.

Basic solution

In the basic way we have to put CSS class name to the form fields. For example I am putting a CSS class in the user name field with the name required. Now inside the jQuery ready function I am writing the code to validate the user name field. For that first I am taking the form and use the validate function of the jQuery plugin to validate. So our code will be like that.

$(document).ready(function () {
    $('form').validate();        
});
<input type="text" id="userName" name="userName" class="required" />

Now if you want to give a error message at the time when user name will be blank then you can add a title attribute in the textbox.

<input type="text" id="userName" name="userName" class="required" 
    title="Please enter user name." />

Now if you want to add another validation to the field then you have to add a CSS class name, like that

<input type="text" id="email" name="email" class="required email" 
    title="Please enter user name." />

In this way we can implement the basic validation. But in basic validation there are some limitations when we want more control over our valid logic. For example if we want to give two different error messages for two validation one for required and another for valid email in our email textbox, then we can not do in this basic validation procedure. Another problem is this basic solution is that our validation rules are scattered through out the page markup. So we have to use the more advance validation procedure.

Advance solution

In this procedure we do not write any validation rules in the page markup for example in our textboxes. The validation function of the jQuery validation plugin take parameter as object literal. In this object literal we can implement the validation rules, messages and many more. So our code will be like that

$('#form1').validate({
    rules: {
        email: {
            required: true,
            email: true 
        }
    }
});

In this case we define two rules to our email field. But what about error messages? If we do not set any error message then the default message will be shown for different rules. This default error message is sufficient for normal situation. But if we need to set error message our self then we can do this.

$('#form1').validate({
    rules: {
        email: {
            required: true,
            email: true 
        }
    },
    messages: {
        email: {
            required: "Please enter email.",
            email: "Please enter a valid email." 
        }
    }
});

Now I am going to add another textbox in our form. Also add validation rules and messages for it.

$('#form1').validate({
    rules: {
        email: {
            required: true,
            email: true 
        },
        dob: {
            required: true,
            date: true 
        }
    },
    messages: {
        email: {
            required: "Please enter email.",
            email: "Please enter a valid email." 
        },
        dob: {
            required: "Please enter date of birth.",
            date: "Please enter valid date."
        }
     }
});
<input type="text" id="email" name="email" />
<br />
<input type="text" id="dob" name="dob" />
<br />
<input type="submit" value="Submit" />

In this way we can implement various validation rules by using jQuery validation plugin. The thing which I like most is we do not implement the logic we only tell what rules and messages we want in our validation.

Full code

<html>
<head>
    <title>jQuery Validation Plugin</title>

    <script type="text/javascript" src="jquery-1.8.3.js"></script>
    <script type="text/javascript" src="jquery.validate.js"></script>

    <script type="text/javascript">
        $(document).ready(function() {
	    $('#form1').validate({
                rules: {
                    email: {
                        required: true,
                        email: true 
                    },
                    dob: {
                        required: true,
                        date: true 
                    }
                },
                messages: {
                    email: {
                        required: "Please enter email.",
                        email: "Please enter a valid email." 
                    },
                    dob: {
                        required: "Please enter date of birth.",
                        date: "Please enter valid date."
                    }
                }
            });
        });
    </script>
</head>
<body>
    <form id="form1">
        <input type="text" id="email" name="email" />
        <br />
        <input type="text" id="dob" name="dob" />
        <br />
        <input type="submit" value="Submit" />
    </form>
</body>
</html>
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s