Form Validation using jQuery Validation Plugin

To validate a form, I prefer Client-side form validation. Therefore, it creates your web project more user-friendly. So, you can find a lot of ways to do client-side validation in HTML form; On the other hand, jQuery Validation Plugin is also the simplest way to validate a form. The jQuery Validation Plugin helps you to implement form validation instantly with many customization options.

With the help of this tutorial, we will explain to you how to integrate client-side form validation with the help of the jQuery validation plugin. Also, this sample script form validation code will help you to use custom validation rules and messages. In the sample script, we’ll explain to you the registration form validation with different regulations and custom messages.

To use jQuery Validation Plugin, you have to attach 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>

Use the validate() method to validate a form established on the selector provider.

Rules are key/value pairs that define custom rules. Key is the name of an element, and value is an object that consists of rule/parameter pairs or a plain String.

Messages are key/value pairs that define custom messages. Key is the name of an element, and value is a message to display for respective elements.

$(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"
        }
    });
});

SEE ALSO: How to Install LAMP (Linux, Apache, MySQL, PHP) on Ubuntu

HTML Code

The user registration form HTML. Therefore, it is validated with the 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

Use the following CSS to style 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;
}

In the above script, we have only used the validation methods. So, you can also use other validation rules as per your requirement. See the list of built-in Validation methods from the Plugin website.

Also, read our previous blog- How to Connect to the Remote MySQL Database using PHP