Member Panel

My Submissions (26) My Credits (38 cr) My Favourites (86) Edit my account Inbox (3)

jQuery Form Validation
September 25th, 2012 - 2 Comments »

In this short tutorial, I will show you how to use a jQuery validation plugin to setup front-end form validation in just a few minutes.

I’ve kept this tutorial very simple with clear instructions so that anyone can implement some validation on their webpage forms. This can be done in just four simple steps…

Step 1: Include the latest version of jQuery

You can download the latest version of jquery library here http://docs.jquery.com/Downloading_jQuery

…or you can use the Google hosted API below:

Insert the following code between your < head > < / head > tags:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

1	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

Step 2: Download the jQuery Validation Plugin

You can download the latest version of jquery validation plugin from here
http://bassistance.de/jquery-plugins/jquery-plugin-validation/

…or use the Microsoft Ajax CDN hosted file as below:

<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js"></script>

1	<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js"></script>

Step 3: Insert the Javascript

Add the following JavaScript validation rules to your webpage (or include as external JavaScript File)

The below code contains the rules and error messages for input field validation. It also includes a direct submit handler (can be used for multiple forms on a single webpage).

<script type="text/javascript">
(function($,W,D)
{
    var FORMVAL = {};
 
    FORMVAL.UTIL =
    {
        setupValidation: function()
        {
            //form validation rules
            $("#signup-form").validate({
                rules: {
                    name: "required",
                    email: {
                        required: true,
                        email: true
                    },
                    password: {
                        required: true,
                        minlength: 8
                    },
                    agree: "required"
                },
                messages: {
                    name: "Name is required!",
                    password: {
                        required: "Password is required!",
                        minlength: "Your password must be at least 8 characters long"
                    },
                    email: "Please enter a valid email address",
                    agree: "Please accept our policy"
                },
                submitHandler: function(form) {
                    form.submit();
                }
            });
        }
    }
 
    //setup the validation on when the webpage is loaded
    $(D).ready(function($) {
        FORMVAL.UTIL.setupValidation();
    });
 
})(jQuery, window, document);
</script>

(function($,W,D)

{

var FORMVAL = {};

FORMVAL.UTIL =

{

setupValidation: function()

{

//form validation rules

$("#signup-form").validate({

rules: {

name: "required",

email: {

required: true,

email: true

password: {

required: true,

minlength: 8

agree: "required"

messages: {

name: "Name is required!",

password: {

required: "Password is required!",

minlength: "Your password must be at least 8 characters long"

email: "Please enter a valid email address",

agree: "Please accept our policy"

submitHandler: function(form) {

form.submit();

}

});

}

//setup the validation on when the webpage is loaded

$(D).ready(function($) {

FORMVAL.UTIL.setupValidation();

});

})(jQuery, window, document);

</script>

Step 4: Create the HTML form for validation

Here is the code snippet for the HTML form which is used to apply above validation rules. Insert this into the body of your webpage.

<!-- HTML form for validation -->
<form action="" method="post" id="signup-form" novalidate="novalidate">
 
    <h2>Sign Up</h2>
 
    <div id="form-data">
        <fieldset>
 
            <div class="fieldgroup">
                <label for="name"> Name</label>
                <input type="text" name="name">
            </div>
 
            
            <div class="fieldgroup">
                <label for="email">Email</label>
                <input type="text" name="email">
            </div>
 
            <div class="fieldgroup">
                <label for="password">Password</label>
                <input type="password" name="password">
            </div>
 
            <div class="fieldgroup">
                <p class="right">By clicking register you agree to our <a target="_blank" href="/policy">policy</a>.</p>
                <input type="submit" value="Sign up" class="submit">
            </div>
 
        </fieldset>
    </div>
 
        <div class="fieldgroup">
            <p>Already registered? <a href="/login">Sign in</a>.</p>
        </div>
</form>

</div>

<label for="email">Email</label>

</div>

<label for="password">Password</label>

</div>

<p class="right">By clicking register you agree to our <a target="_blank" href="/policy">policy</a>.</p>

</div>

</fieldset>

</div>

<p>Already registered? <a href="/login">Sign in</a>.</p>

</div>

</form>

That is all for the jQuery form validation. Add some styles to form to make it looking nice.

You can see a LIVE PREVIEW here

Build a quick and simple Contact Form

Simple jQuery Hover Effect

Tooltips using jQuery

2 Responses

Piyush says:

January 28, 2013 at 6:26 am

different error text for different element and addMethod you can find a nice example here
http://www.thewebexpert.in/jquery-vidation-js-tutorial/

Reply
nisha says:

March 27, 2013 at 5:34 pm

hi, cool plugin!!! does this plugin check 2 password.. ya like both must be same!!!

Reply