Client side validation using jquery

Registration form validation using jquery validator


How to validate a form data on client side before send to the form data on server.


Step 1 :-

I have a html file which name is "RegistrationForm.html", This file will include jquery, css, bootstrap.

 Here I am going to write my code to validate the form :-

 <!DOCTYPE html>
<html>
  <head>
    <title>Form Validation</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

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

     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.1/additional-methods.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"/>
                      </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"/>
                      </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 min length" >
                      </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 class="form-group">
                      <label for="url" class="col-md-4">Upload video </label>
                      <div class="col-md-6">
                        <input type="file" class="form-control" name="videoUploader" id="videoUploader" >
                        <video controls id="vid" style="display:none"></video>
                      </div>
                    </div>
                    <div class="form-group">
                      <label for="url" class="col-md-4">Password </label>
                      <div class="col-md-6">
                        <input type="password" id="pw" class="form-control" name="password" placeholder="Enter Password" >
                      </div>
                    </div>
                    <div class="form-group">
                      <label for="url" class="col-md-4">Confirm password </label>
                      <div class="col-md-6">
                        <input type="password" class="form-control" name="confirm_password" placeholder="Enter Confirm Password" >
                      </div>
                    </div>
                    <div class="form-group">
                      <label for="hobby" class="col-md-4">Please Select Hobby </label>
                      <div class="col-md-8">
                        <input type="checkbox" name="hobby">Cricket
                        <input type="checkbox" name="hobby">Kabbadi
                        <input type="checkbox" name="hobby">Football
                        <input type="checkbox" name="hobby">Balliball
                      </div>
                    </div>
                    <div class="form-group">
                      <label for="gender" class="col-md-4">Please Select Gender </label>
                      <div class="col-md-6">
                        <input type="radio" name="gender">Male
                        <input type="radio" name="gender">Female
                      </div>
                    </div>
                    <div class="form-group">
                      <label for="city" class="col-md-4">Please Select City </label>
                      <div class="col-md-6">
                        <select class="form-control" name="city" id="city">  
                          <option value="">Select One...</option>
                          <option value="indore">Indore</option>
                          <option value="bhopal">Bhopal</option>
                          <option value="dewas">Dewas</option>
                        </select>
                      </div>
                    </div>
                    <div class="form-group">
                      <label class="col-md-4">Select DOB</label>
                      <div class="col-md-6">
                        <input class="form-control" type="date" name="dob" />
                      </div>
                    </div>  
                    <div class="form-group">
                      <label class="col-md-4">Select Start date</label>
                      <div class="col-md-6">
                        <input class="form-control" type="date" name="startDate" id="stDate" />
                      </div>
                    </div>
                    <div class="form-group">
                      <label class="col-md-4">Select End date</label>
                      <div class="col-md-6">
                        <input class="form-control" type="date" name="endDate" id="eDate" />
                      </div>
                    </div>
                    <div class="form-group">
                      <label class="col-md-4">Select Image</label>
                      <div class="col-md-6">
                        <input class="form-control" type="file" name="imgUploader" />
                      </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" id="btnSubmit" value="Submit" />
            </center>
          </div>
        </form>
      </div>
    </div>
  </body>
  
  <script type="text/javascript">
    $.validator.addMethod("imgFileSize",function(value,element,param){
      return this.optional(element)||(element.files[0].size<=param)
    });
  $.validator.addMethod("videoFileSize",function(value,element,param){
  return this.optional(element)||(element.files[0].size<=param)
  });
    $.validator.addMethod("videoFileDuration",function(value,element,param){
      var seconds = $("#vid")[0].duration;    
      if(seconds < param)
        return true;
      else
        return false;
    });
  $.validator.addMethod("regex",function(value,element,param){
  var re = new RegExp(param);
        return this.optional(element) || re.test(value);
  });
    $.validator.addMethod("birth", function (value, element) {
        var dob = value.split('-');
        if (parseInt(dob[0]) <= new Date().getFullYear() 
            && parseInt(dob[1])<= new Date().getMonth()+1 
            && parseInt(dob[2])<= new Date().getDate())
            return true;
        else
            return false;
    });
    $.validator.addMethod("greaterThan",function(value, element, params) {
      if (!/Invalid|NaN/.test(new Date(value))) {
          return new Date(value) > new Date($(params).val());
      }
      return isNaN(value) && isNaN($(params).val()) || (Number(value) > Number($(params).val())); 
    });
    $("#videoUploader").change(function(e){    
      var file = e.currentTarget.files[0];    
      var objectUrl = URL.createObjectURL(file);    
      $("#vid").prop("src", objectUrl);    
    });
    $("#myForm").validate({
        rules: {
          name: "required",
          url: {
              required: true,
              url: true
          },
          phone: {
              required: true,
               //pattern: "^[7-9]{1}[0-9]{9}$/"
               rangelength: [10, 10],
               digits: true,
          },
          email: {
              required: true,
              email: true
          },
          code: {
              required: true,
              rangelength: [11, 11]
          },
          min_length:{
              required: true,
              minlength: 3
          },
          number: {
            digits: true,
            required:true
          },
          videoUploader:{
          required:true,
          extension:'ogg|mp4|avi',
          videoFileSize:10253326,
            videoFileDuration:60
          },
          password: {
            required: true,
            regex: "^.*(?=.{6,})(?=.*[a-z])(?=.*[A-Z])(?=.*[@#$%^&+=]).*$"
          },
          confirm_password: {
            required: true,
            equalTo: "#pw"
          },
          hobby:{
          required:true,
          minlength:2
          },
          gender:{
            required:true
          },
          city:{
            required:true
          },
          dob:{
            required:true,
            birth:true
          },
          startDate:{
            required:true
          },
          endDate:{
            required:true,
            greaterThan: "#stDate"
          },
          imgUploader:{
            required:true,
            extension:'jpg|png',
            imgFileSize:10000,
          }
        },
        messages: {
          name: "Please Enter Name",
          url:{
          required:"Please enter URL",
          url:"Please Enter Website Url"
          },
          phone:{
          required: "Please Enter Phone",
        //pattern: "Please Enter Valid Phone Number"
        rangelength:"Phone number must be 10 digits",
        digits:"Phone number must be 10 digits"
          },
          email: {
          required: "Please Enter Email",
              email: "Please Enter Valid Email"
          },
          code: {
          required: "Please Enter Code",
              rangelength: "Please Enter 11 Digit code"
          },
          min_length:{
          required: "Please Enter min_length",
              minlength: "Please Enter Minimum 3 Digit"
          },
          number: {
          digits: "Please Enter only digits",
            required:"Please Enter number"
          },
          videoUploader:{
          required:"Please choose file",
          extension:'Please choose ogg|mp4|avi file',
          videoFileSize:"Please upload less than 10 mb file",
            videoFileDuration:"Video length/duration must be less than 1 min"
          },
          password: {
            required: "Please provide a password",
            regex:"Password must have 6 character and one uppercase, one lowercase, one digit and one special character"
          },
          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"
          },
          hobby:{
            required:"Please select hobby",
            minlength:"Please select 2 hobby"
          },
          gender:{
            required:"Please select gender"
          },
          city:{
            required:"Please select a city"
          },
          dob:{
            required:"Please select DOB",
            birth:"Please select correct DOB"
          },
          startDate:{
            required:"Please select start date"
          },
          endDate:{
            required:"Please select end date",
            greaterThan:"Must be greater than start date."
          },
          imgUploader:{
            required:"Please select image",
            extension:"Please choose jpg or png file",
            imgFileSize:"Please upload less than 10 kb image"
          }
        },
        errorPlacement: function(error, element) {
            if (element[0].type == 'checkbox') {
                error.appendTo(element.parent());
            }
            else if(element.is(":radio")){
              error.appendTo(element.parent());
            }
            else {
                error.insertAfter(element);
            }
        },
        submitHandler: function (form) {
          form.submit();
        }
    });
    $(document).ready(function() {
      $("#btnSubmit").click(function(){
        if($("#myForm").valid()){
          alert("Form Submitted Successfully...");
        }
        else{
          alert("Form Not Submitted...");
        }
      });
    });
  </script>

</html>
Step 2 :-

 Here I am posting my video so that you can watch all validations what I have applied in my registration form.


Comments

Post a Comment

Popular posts from this blog

Call CRUD(GET, POST, PUT, DELETE) API using WebClient in c#

          Here We will see how we can call all CRUD methods (GET, PUT, POST, DELETE) with the help of WebClient in c#. you will need to add reference of "System.Web.Extensions" assembly to your project. 1. Call POST API :-     string apiUrl = "http://localhost:26404/api/POSTAPI";     object input = new     {         Name = txtName.Text.Trim()     };     string inputJson = (new JavaScriptSerializer()).Serialize(input);     WebClient client = new WebClient();     client.Headers["Content-type"] = "application/json";     client.Encoding = Encoding.UTF8;     string json = client.UploadString(apiUrl + "/PostCustomers","POST", inputJson); 2. Call GET API :-     string apiUrl = "http://localhost:26404/api/GETAPI";     WebClient client = new WebClient();     client.Headers["Content-type"] = "app...
Read more

Asp.Net MVC 5 authentication and authorization using claims principal

Asp.Net MVC 5 authentication and authorization using claims principal :- Step1 : File -> New Project -> Asp.Net Web Application -> Asp.Net 4.5.2 Templates Choose empty MVC project template Step2 : Install following nuget packages Microsoft.AspNet.Identity.Core Microsoft.AspNet.Identity.Owin Microsoft.Owin Microsoft.Owin.Host.SystemWeb Microsoft.Owin.Security Microsoft.Owin.Security.Cookies Microsoft.Owin.Security.OAuth Owin Step3 : Create a Owin Startup class and decorate with assembly attribute OwinStartup. using Microsoft.AspNet.Identity; using Microsoft.Owin; using Microsoft.Owin.Security.Cookies; using Owin; [assembly: OwinStartup(typeof(AspNetMVC5Authorization.Startup))]  // here "AspNetMVC5Authorization" is the name of project namespace AspNetMVC5Authorization { public class Startup { public void Configuration(IAppBuilder app) { ConfigureAuthenticat...
Read more