How to Setup jQuery form validation?

Download Source Code

This tutorial going to explain how to use jquery form validation plugin. The basic principle of this plugin is how to specify validation rules and error message for html elements using JavaScript.The Sample Registration form is designed using Bootstrap 4.

Output:

Step 1: Download the latest jquery version from jquery.com.

Step 2: Download the latest jquery validation from this link.

Step 3: Create a Html form.

For the registation we want to collect the following information.

1.First Name

2.Last Name

3.Email Address

4.Password

5.Address

6.City

7.State

8.Zipcode

9.Gender

Lets create our form containing Html fields.

<div class="container">

        <h3>Registration</h3>

        <hr>

        <form action="" id="registration" name="registration" method="POST">

            <div class="form-row">

                <div class="form-group col-md-6">

                    <label for="firstname">First Name</label>

                    <input type="text" class="form-control" id="firstname" name="firstname"

                        placeholder="Enter your first name">

                </div>

                <div class="form-group col-md-6">

                    <label for="lastname">Last Name</label>

                    <input type="text" class="form-control" id="lastname" name="lastname"

                        placeholder="Enter your last name">

                </div>

            </div>

            <div class="form-row">

                <div class="form-group col-md-6">

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

                    <input type="email" class="form-control" id="inputemail" name="inputemail" placeholder="Email">

                </div>

                <div class="form-group col-md-6">

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

                    <input type="password" class="form-control" id="inputpassword" name="inputpassword"

                        placeholder="Password">

                </div>

            </div>

            <div class="form-row">

                <div class="form-group col-md-12">

                    <label for="inputAddress">Address</label>

                    <input type="text" class="form-control" id="inputAddresss" name="inputAddresss"

                        placeholder="Enter your Address">

                </div>

            </div>

            <div class="form-row">

                <div class="form-group col-md-6">

                    <label for="inputCity">City</label>

                    <input type="text" class="form-control" id="inputCity" name="inputCity">

                </div>

                <div class="form-group col-md-4">

                    <label for="inputState">State</label>

                    <select id="inputState" name="inputState" class="form-control">

                        <option selected value="">Choose...</option>

                        <option value="1">Tamil Nadu</option>

                        <option value="2">Kerala</option>

                        <option value="3">Karnataka</option>

                        <option value="4">Andra Pradesh</option>

                    </select>

                </div>

                <div class="form-group col-md-2">

                    <label for="inputZip">Zip</label>

                    <input type="text" class="form-control" id="inputZip" name="inputZip">

                </div>

            </div>            

            <div class="form-row">

                <div class="form-group">

                    <label class="form-check form-check-inline">

                        <input type="radio" id="male" name="gender" value="1" />Male &nbsp;

                        <input type="radio" id="female" name="gender" value="2" />Female

                    </label>

                </div>

            </div>

            <div class="form-row">

                <div class="form-group">

                    <label class="form-check form-check-inline">

                        <input type="checkbox" id="agree" name="agree" value="agree" />Please agree to our

                        policy

                    </label>

                </div>

            </div>

            <button type="submit" class="btn btn-primary" name="signup" value="Sign up">Sign up</button>

        </form>

    </div>

Step 4: Create a new file css/styles.css and add it to the head section of the Html file.

<link rel=”stylesheet” href=”css/styles.css”>

Copy the following style into the newly created file.

@import url("https://fonts.googleapis.com/css?family=Open+Sans");

*{
    margin:0;
    padding: 0;
}

body{
    font-family: "Open sans";
    font-size: 14px;
}

.container{
    width:550px !important;
    margin: 25px auto;   
    padding: 5px; 
    border-radius: 10px;
}

.help-block {
    display: block;
    margin-top: 5px;
    margin-bottom: 10px;
    color:#e02222;
}

label.help-block {
    display: inline;
    }

Step 5:

Create a new file js/form-valiation.js and reference it after the script tag of the jquery validation plugin.

<script src=”js/form-validation.js”></script>

Copy the following code into the newly created file.

$.validator.setDefaults({
    submitHandler: function () {
        alert("submitted!");
    }
});

$(document).ready(function () {

    //Intalize form validation
    $("#registration").validate({

        //Validation rules
        rules: {
            firstname: "required",
            lastname: "required",
            inputemail: {
                required: true,
                email: true
            },
            inputpassword: {
                required: true,
                minlength: 5
            },
            inputAddresss: "required",
            inputCity: "required",
            inputState: "required",
            inputZip: {
                required: true,
                digits: true
            },
            gender: {
                required: true
            },
            inputState: {
                required: true
            },
            agree: {
                required: true
            }
        },

        //Validation message
        messages: {
            firstname: "Please enter your firstname",
            lastname: "Please enter your lastname",
            inputemail: "please enter a valid email address",
            inputpassword: {
                required: "please provide your password",
                minlength: "your password must be atleaset 5 char long"
            },
            inputAddresss: "please enter valid address",
            inputCity: "please enter your city",
            inputState: "please enter your state",
            inputZip: {
                required: "enter zip code",
                digits: "Zipcode only accepts digits"
            },
            gender: {
                required: "Please select your gender"
            },
            inputState: {
                required: "Please select a state"
            },
            agree: {
                required: "Please accept our policy"
            }

        },
        errorElement: "em",
        errorPlacement: function (error, element) {

            error.addClass("help-block");
            element.parents(".col-sm-5").addClass("has-feedback");

            if (element.prop("type") === "checkbox" || element.prop("type") === "radio") {
                error.insertAfter(element.parent("label"));
            } else {
                error.insertAfter(element);
            }

            if (!element.next("span")[0]) {
                $("<span class='glyphicon glyphicon-remove form-control-feedback'></span>").insertAfter(element);
            }
        },
        success: function (label, element) {
            if (!$(element).next("span")[0]) {
                $("<span class='glyphicon glyphicon-ok form-control-feedback'></span>").insertAfter($(element));
            }
        },
        highlight: function (element, errorClass, validClass) {
            $(element).parents(".col-sm-5").addClass("has-error").removeClass("has-success");
            $(element).next("span").addClass("glyphicon-remove").removeClass("glyphicon-ok");
        },
        unhighlight: function (element, errorClass, validClass) {
            $(element).parents(".col-sm-5").addClass("has-success").removeClass("has-error");
            $(element).next("span").addClass("glyphicon-ok").removeClass("glyphicon-remove");
        }
    });
});

Download Source Code

Thanks for Reading