jQuery Form Validation Sample Example

jQuery is JavaScript library containing a lot of important and usable function which facilitate our Application. Java script is client side language and which run on client browser.

In most of web application we have to validate user input before submitting to Server. You can validate user input on Client side using Java script or jQuery and on Server Side  using server side programming language like PHP, Asp.net, Java and etc.But when you validate input to server side then first request send to server with all user Inputs, then it check weather  these input are correct or not the return to client to display error.


This is long process so most of the time we prefer client side validation. For this this is jQuery Library which help us out for validating user input very efficiently and quick.

I will show you how to setup front-end form validation using jQuery .You can apply jQuery Validation to PHP, Asp.net, Java and etc web applications.

Step 1:
Include latest version of jQuery Library.

Step 2 :
Download the jQuery Validation Plugin.

Step 3:
Include Following JavaScript rule to web Page.

(function($,W,D)
{
    var JQUERY4U = {};
 
    JQUERY4U.UTIL =
    {
        setupFormValidation: function()
        {
            //form validation rules
            $("#register-form").validate({
                rules: {
                    firstname: "required",
                    lastname: "required",
                    email: {
                        required: true,
                        email: true
                    },
                    password: {
                        required: true,
                        minlength: 5
                    },
                    agree: "required"
                },
                messages: {
                    firstname: "Please enter your firstname",
                    lastname: "Please enter your lastname",
                    password: {
                        required: "Please provide a password",
                        minlength: "Your password must be at least 5 characters long"
                    },
                    email: "Please enter a valid email address",
                    agree: "Please accept our policy"
                },
                submitHandler: function(form) {
                    form.submit();
                }
            });
        }
    }
 
    //when the dom has loaded setup form validation rules
    $(D).ready(function($) {
        JQUERY4U.UTIL.setupFormValidation();
    });
 
})(jQuery, window, document);

Step 4 :
Add HTML to your Page

<!-- HTML form for validation demo -->
<form action="" method="post" id="register-form" novalidate="novalidate">
 
    <h2>User Registration</h2>
 
    <div id="form-content">
        <fieldset>
 
            <div class="fieldgroup">
                <label for="firstname">First Name</label>
                <input type="text" name="firstname"/>
            </div>
 
            <div class="fieldgroup">
                <label for="lastname">Last Name</label>
                <input type="text" name="lastname"/>
            </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="Register" class="submit"/>
            </div>
 
        </fieldset>
    </div>
 
        <div class="fieldgroup">
            <p>Already registered? <a href="/login">Sign in</a>.</p>
        </div>
</form>

Download Sample Code and View Online Demo

Plese Feel Free to Socializer This Post

SOCIALIZE IT →

Tweet

FOLLOW US →

SHARE IT →