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

How to breakpoint or debug on .ts page in angular

Image
Hello Guys, In this post we will talk about how to debug angular components Step 1 :-              I have an angular project which name is “Hello-World” . Step 2 :-             Run this “Hello-World” project using   below command :-             ng serve   Step 3 :-             Open running project in “Chrome” browser. And then do “inspect” , for “inspect” right click on “chrome” browser and click on “inspect” option. Step 4 :-             And now go to “sources” tab. Then go to “page -> webpack:// -> . -> src -> app” and here you can see your project component pages. Choose any your project component page folder. Here I am selecting my component folder “detail” . This folder contains .h...
Read more

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

Sending An E-Mail Using ASP.NET MVC

 In this post we will discuss about how mail is sent from ASP.NET MVC application. MailController.cs :- using System; using System.Collections.Generic; using System.Linq; using System.Net; using System.Net.Mail; using System.Web; using System.Web.Mvc; namespace  SendMail .Controllers {     public class MailController : Controller     {         public ActionResult Index()         {             return View();         }         public ActionResult SendMail()         {             string to_email = "EmailId of the one to whom the mail is to be sent";                          var from_email = "EmailId of the one who will send the mail";             var subject = "Testing email sending functionality";   ...
Read more