Form Validation using jQuery Validation Plugin

Client-side form validation is very useful for validating a form and it makes your web project more user-friendly. You can found many ways to perform client-side validation in HTML form, but jQuery Validation Plugin is the easiest way to validate a form. The jQuery Validation Plugin lets you implement form validation instantly with many customization options.

This tutorial will show you how to integrate client-side form validation using jQuery validation plugin. Also, this example form validation code will help you to use custom validation rules and messages. In the sample script, we’ll demonstrate a registration form validation with different rules and custom messages.

To use jQuery Validation Plugin you need to include the jQuery library (jquery.min.js) and jQuery validation plugin library (jquery.validate.js).

<script src="jquery.min.js"></script>
<script src="jquery.validate.js"></script>

The validate() method is used to validate a form based on the selector provided.
rules are key/value pairs defining custom rules. Key is the name of an element and value is an object consisting of rule/parameter pairs or a plain String.
messages are key/value pairs defining custom messages. Key is the name of an element and value is a message to display for respective element.

$(document).ready(function() {
    $("#userForm").validate({
        rules: {
            name: "required",
            email: {
                required: true,
                email: true
            },
            phone: {
                required: true,
                number: true
            },
            url: {
                required: false,
                url: true
            },
            username: {
                required: true,
                minlength: 6
            },
            password: {
                required: true,
                minlength: 6
            },
            confirm_password: {
                required: true,
                minlength: 6,
                equalTo: "#password"
            },
            agree: "required"
        },
        messages: {
            name: "Please enter your name",
            email: "Please enter a valid email address",
            phone: {
                required: "Please enter your phone number",
                number: "Please enter only numeric value"
            },
            url: {
                url: "Please enter valid url"
            },
            username: {
                required: "Please enter a username",
                minlength: "Your username must consist of at least 6 characters"
            },
            password: {
                required: "Please provide a password",
                minlength: "Your password must be at least 6 characters long"
            },
            confirm_password: {
                required: "Please provide a password",
                minlength: "Your password must be at least 6 characters long",
                equalTo: "Please enter the same password as above"
            },
            agree: "Please accept our policy"
        }
    });
});

HTML Code

The user registration form HTML which is validated with jQuery Validation Plugin.

<form class="userform" id="userForm" method="post" action="">
    <p>
        <label for="name">Name</label>
        <input id="name" name="name" type="text" >
    </p>
    <p>
        <label for="email">E-Mail</label>
        <input id="email" type="email" name="email" >
    </p>
    <p>
        <label for="phone">Phone</label>
        <input id="phone" type="phone" name="phone" >
    </p>
    <p>
        <label for="url">URL</label>
        <input id="url" type="url" name="url">
    </p>
    <p>
        <label for="username">Username</label>
        <input id="username" name="username" type="text">
    </p>
    <p>
        <label for="password">Password</label>
        <input id="password" name="password" type="password">
    </p>
    <p>
        <label for="confirm_password">Confirm password</label>
        <input id="confirm_password" name="confirm_password" type="password">
    </p>
    <p>
        <label for="agree">Please agree to our policy</label>
        <input type="checkbox" class="checkbox" id="agree" name="agree">
    </p>
    <p>
        <input class="submit" type="submit" value="Submit">
    </p>
</form>

CSS Code

The following CSS is used to styling the form and error message.

.userform{width: 400px;}
.userform p {
    width: 100%;
}
.userform label {
    width: 120px;
    color: #333;
    float: left;
}
input.error {
    border: 1px dotted red;
}
label.error{
    width: 100%;
    color: red;
    font-style: italic;
    margin-left: 120px;
    margin-bottom: 5px;
}
.userform input.submit {
    margin-left: 120px;
}

Here we’ve used mostly used validation methods, you can also use many other validation rules as per your requirement. See the list of built-in Validation methods from Plugin website.