JQuery Form Validation using jQuery Validation Plugin Tutorial

In this tutorial we learn how to validate the Form using jQuery Validation Plugin in simple example.




form validation

Introduction

Form validation generally happens on the server side where we check whether the data provided by user or client is in correct format or not. If input data fails to satisfy the validation rules then the server would have to send an error response code back to the client and request that the form be resubmitted with correct information. This is really a lengthy process. we can overcome this problem by validating the input data on client side. If the input data is incorrect, we will display the error message and again ask the user to resubmitted the form with correct information.

Here, we will use Jquery Form Validation plugin to validate the form in the client side. For that first, we need to load Form validation js file to validate input fields and also use bootstrap css file.

In this tutorial, we will validate the input fields in the form. We will design a simple form to validate input fields for specific validation rules:

1. Email Validation: Checks whether input field contains an email address.
2. NotEmpty Validation: Ensures that the field is not empty.
3. Url Validation: Ensures that the input is a valid url.
4. Regexp Validation: Ensures that defined patterns is match character combinations in string
5. Length Validation: Checks whether input length is exact defined rules.
6. Min Length Validation Ensures that input length should be greater than defined rules.
7. Phone Number Validation: Ensure that input is valid Mobile Number(Should be start from 7 and exact 10 digit(This is for India Mobile Number))
8. Numeric Validation: Checks whether the field contains only numeric digits

Load JS and CSS file

To validate and form style, we need to load JS and CSS. Here is the link, we will add these line in the top of the HTML fie.

<!-- Latest compiled and minified BootStarp CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- jQuery Form Validation library -->
<script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js"></script>

Create a Form

We will create a simple a form who has contain Name, Phone Number, Email, Website, Code, Filed should be contain min length, Field should be contain only digits. We need to define Id of the form. In this tutorial we will use name of the id is ‘myForm’

<!DOCTYPE html>
<html>
  <head>
    <title>Form Validation</title>
    <!-- Latest compiled and minified BootStarp CSS -->
    <link rel="stylesheet" 
          href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <!-- jQuery library -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js">
                 </script>
    <!-- jQuery Form Validation library -->
    <script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js">
              </script>
  </head>
  <body>
    <div id="page-wrapper" >
      <div class="container" >
        <h1>
          Form Validation
        </h1>
        <form name="myForm" class="form-horizontal" id ="myForm" 
                 action="#"  method="POST" enctype="multipart/form-data">
          <div class="panel panel-info">
            <div class="panel-heading">Form validation</div>
            <div class="panel-body">
              <div class="row">
                <div class="col-md-12">
                  <div class="col-md-6">
                    <div class="form-group">
                      <label for="name" class="col-md-4">Name *</label>
                      <div class="col-md-6">
                        <input type="text" class="form-control" name="name" 
                                placeholder="Enter Name" required/>
                      </div>
                    </div>
                    <div class="form-group" >
                      <label for="Mobile" class="col-md-4">Mobile *</label>
                      <div class="col-md-6">
                        <input type="text" class="form-control"  name="phone" 
                            placeholder="Enter Mobile Number" required/>
                      </div>
                    </div>
                    <div class="form-group  ">
                      <label for="email" class="col-md-4">Email </label>
                      <div class="col-md-6">
                        <input type="text" class="form-control" name="email" 
                              placeholder="Enter  Email" >
                      </div>
                    </div>
                    <div class="form-group">
                      <label for="code" class="col-md-4">Code(Exact 11 digit) </label>
                      <div class="col-md-6">
                        <input type="text" class="form-control" name="code"
                             placeholder="Enter code" >
                      </div>
                    </div>
                    <div class="form-group">
                      <label for="code" class="col-md-4">Min Length </label>
                      <div class="col-md-6">
                        <input type="text" class="form-control" name="min_length" 
                                       placeholder="Enter code" >
                      </div>
                    </div>
                    <div class="form-group">
                      <label for="code" class="col-md-4">Number </label>
                      <div class="col-md-6">
                        <input type="text" class="form-control" name="number"
                               placeholder="Enter Only digits" >
                      </div>
                    </div>
                    <div class="form-group">
                      <label for="url" class="col-md-4">Website </label>
                      <div class="col-md-6">
                        <input type="text" class="form-control" name="url" 
                                placeholder="Enter Url" >
                      </div>
                    </div>
                  </div>
                  <!-- end div -->
                </div>
                <!-- end div -->
              </div>
            </div>
          </div>
          <div class="col-md-4 col-md-offset-4" style="margin-bottom: 50px;">
            <center>
              <input type="submit" class="btn btn-primary" value="Submit" />
            </center>
          </div>
        </form>
      </div>
    </div>
  </body>
</html>

form_validation

Add Error Style Css

We need to define css to display error in the form

<style type="text/css">
    #form .form-group label.error {
    color: #FB3A3A;
    display: inline-block;
    margin: 0px 0 0px 0px;
    padding: 0;
    text-align: left;
    }
</style>

Add Jquery

Now, finally add Jquery to define rules to validate input field. In the validation, we will define rules for specific input field name:

<script type="text/javascript">
  (function ($, W, D)
  {
  var JQUERY4U = {};
  JQUERY4U.UTIL =
      {
          setupFormValidation: function ()
          {
          //form validation rules
          $("#myForm").validate({
              rules: {
              name: "required",
              url: {
                  required: true,
                  url: true
              },
              phone: {
                      required: true,
                       minlength: 10,
                       pattern: [/^[7-9]{1}[0-9]{9}$/], 
                  },
              email: {
                      required: true,
                      email: true
                  },
              code: {
                      required: true,
                      rangelength: [11, 11]
                  },
              min_length:{
                      required: true,
                      minlength: 3
                  },
              number: {
                  digits: true,
                  required:true,
                  minlength:5
                  }
              },
              messages: {
              name: "Please Enter Name",
              phone: "Please Enter Valid Mobile Number",
              email: "Please Enter valid Email",
              code: "Please Enter 11 Digit code",
              min_length:"Please Enter Minimum 3 Digit",
              number: "Please Enter Only Digits",
              url: "Please Enter Website Url"
              },
              submitHandler: function (form) {
              form.submit();
              }
          });
        }
      }
  //when the dom has loaded setup form validation rules
  $(D).ready(function ($) {
      JQUERY4U.UTIL.setupFormValidation();
  });
  })(jQuery, window, document);
</script>

form validation



The following two tabs change content below.
Abhay Anand has experience in the field of Software Development. He can program Android, PHP, JavaScript, Html, Css. He develops web and Android applications. You can reach him at anand.abhay1910@gmail.com