jQuery form validation in Hindi
Post Views : 247

Leave a Comment / By
jQuery form validation in Hindi

Introduction

हेलो दोस्तों आज हम इस post में HTMl form validation कैसे कर सकते है!. उसके बारेमे जानगे!. HTML form को हम दो तरीके से validation कर सकते है!. एक तो client-side validation और दूसरा server side validation. तो ये client-side validation क्या है? cliend side validation सामान्य तोर पर jquery, javascript के साथ perform करा सकते है!. client side validation में user का input data invalid या valid है! वह हम client के brower में check करके user को तुरत error show करा सकते है!.

दूसरा है server side validation उसमे user अपना सारा input fill करके submit करेगा तो वह server पैर send होगा और server में user के valid और invalid data check करेगा और बाद में वह client के brower में error show करेगा की यह input invalid है!. तो हा इस post में jquery plugin का इस्तेमाल करके HTML form को validation कैसे कर सकते है! उसके बारे में समजेंगे!. और साथ में ही jquery plugin का इस्तेमाल किये बिना HTML form का validation jquery script से बी देखेंगे!.

HTML form validation Using Jquery Example

HTML form का jquery से validation करने के लिए jquery HTML file में include करनी होती है!.

Jquery

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

HTML form

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Form Validation Using Jquery</title>   
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
  </head>
  <body>
    <style>.error{color: red;}</style>
    <div class="container">
      <form action="" method="post" id="formID">
        <div class="form-group"><h3>Form validation with jquery plugin</h3></div>        
        <div class="form-group">
          <label for="fname">First name:</label>
          <input type="text" class="form-control" id="fname" name="fname">
        </div>
        <div class="form-group">
          <label for="lname">Last name:</label>
          <input type="text" class="form-control" id="lname" name="lname">
        </div>    
        <div class="form-group">
          <label for="fname">Username:</label>
          <input type="text" class="form-control" id="username" name="username">
        </div>
        <div class="form-group">
          <label for="fname">Password:</label>
          <input type="text" class="form-control" id="password" name="password">
        </div>
        <div class="form-group">
          <label for="fname">Confirm Password:</label>
          <input type="text" class="form-control" id="c_password" name="c_password">
        </div>
        <div class="form-group">
          <label for="fname">Email:</label>
          <input type="text" class="form-control" id="email" name="email">
        </div>
        <div class="form-group set_error">
          <label>Gender:</label><br>
          <input type="radio" name="gender" value="male">Male
          <input type="radio" name="gender" value="female">Female
        </div>
        <div class="form-group">
          <textarea name="address" id="address" class="form-control"></textarea>
        </div>      
        <input type="submit" value="Submit" class="btn-primary form-control">
      </form>
    </div>    
  </body>
</html>

Jquery Form Validation script code

<script>
      $(document).ready(function() {
        $('#formID').submit(function(e) {
          e.preventDefault();
            var fname       = $('#fname').val();
            var lname       = $('#lname').val();
            var username    = $('#username').val();
            var email       = $('#email').val();
            var password    = $('#password').val();
            var c_password  = $('#c_password').val();
            var gender      = $('input[name="gender"]:checked');
            var address     = $('#address').val();
            
            $(".error").remove();

            if (fname.length < 1) {
              $('#fname').after('<span class="error">This field is required</span>');
            }
            if (lname.length < 1) {
              $('#lname').after('<span class="error">This field is required</span>');
            }
            if (username.length < 1) {
              $('#username').after('<span class="error">This field is required</span>');
            }
            if (email.length < 1) {
              $('#email').after('<span class="error">This field is required</span>');
            } else {
              var regEx = /^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/;
              var validEmail = regEx.test(email);              
              if (!validEmail) {
                $('#email').after('<span class="error">Enter a valid email</span>');
              }
            }
            if (password.length < 8) {
            $('#password').after('<span class="error">Password must be at least 8 characters long</span>');
            }
            if(c_password.length < 1){
              $('#c_password').after('<span class="error">This field is required</span>');
            }
            if( password.length > 1 && c_password.length > 1 ){
              if( password != c_password  ){
                $("#c_password").after("<span class='error'>Password don't match</span>");
              }
            }    
            if( gender.length == 0 ){
              $(".set_error").after('<span class="error">This field is required</span>');
            }
            if( address.length < 0 ){
              $("#address").after('<span class="error">This field is required</span>');
            }
      });
    });
    </script>

ऊपर के example में आप देख सकते है! की जब बी हम form submit करते है!. on submit पर हमारी jquery script execute होगी और वह हमरे user के सभी input valid/invalid है! ये check करेगा और brower में हमें error show करेगा!. jquery script में preventDefault() वह हमरे document को hold करके रखता है!. $(‘#id’).val() val() वह jquery का function है! जिससे हम input field के value को get करेंगे!. value get करने के बाद में हम input value valid/invalid check करेंगे और उसके बाद में invalid input value error show करेंगे!.

form validation Using Jquery

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Form Validation Using Jquery</title>   
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
    
    <script>
      $(document).ready(function() {
        $('#formID').submit(function(e) {
          e.preventDefault();
            var fname       = $('#fname').val();
            var lname       = $('#lname').val();
            var username    = $('#username').val();
            var email       = $('#email').val();
            var password    = $('#password').val();
            var c_password  = $('#c_password').val();
            var gender      = $('input[name="gender"]:checked');
            var address     = $('#address').val();
            
            $(".error").remove();

            if (fname.length < 1) {
              $('#fname').after('<span class="error">This field is required</span>');
              //return false;
            }
            if (lname.length < 1) {
              $('#lname').after('<span class="error">This field is required</span>');
              //return false;
            }
            if (username.length < 1) {
              $('#username').after('<span class="error">This field is required</span>');
              //return false;
            }
            if (email.length < 1) {
              $('#email').after('<span class="error">This field is required</span>');
              //return false;
            } else {
              var regEx = /^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/;
              var validEmail = regEx.test(email);              
              if (!validEmail) {
                $('#email').after('<span class="error">Enter a valid email</span>');
                //return false;
              }
            }
            if (password.length < 8) {
              $('#password').after('<span class="error">Password must be at least 8 characters long</span>');
              //return false;
            }
            if(c_password.length < 1){
              $('#c_password').after('<span class="error">This field is required</span>');
              //return false;
            }
            if( password.length > 1 && c_password.length > 1 ){
              if( password != c_password  ){
                $("#c_password").after("<span class='error'>Password don't match</span>");
                //return false;
              }
            }    
            if( gender.length == 0 ){
              $(".set_error").after('<span class="error">This field is required</span>');
              //return false;
            }
            if( address.length < 0 ){
              $("#address").after('<span class="error">This field is required</span>');
              //return false;
            }
      });
    });
    </script>
  </head>
  <body>  
    <style>.error{color: red;}</style>
    <div class="container">
      <form action="#" method="post" id="formID">
        <div class="form-group"><h3>Form validation with jquery</h3></div>        
        <div class="form-group">
          <label for="fname">First name:</label>
          <input type="text" class="form-control" id="fname" name="fname">
        </div>
        <div class="form-group">
          <label for="lname">Last name:</label>
          <input type="text" class="form-control" id="lname" name="lname">
        </div>    
        <div class="form-group">
          <label for="username">Username:</label>
          <input type="text" class="form-control" id="username" name="username">
        </div>
        <div class="form-group">
          <label for="password">Password:</label>
          <input type="text" class="form-control" id="password" name="password">
        </div>
        <div class="form-group">
          <label for="c_password">Confirm Password:</label>
          <input type="text" class="form-control" id="c_password" name="c_password">
        </div>
        <div class="form-group">
          <label for="email">Email:</label>
          <input type="text" class="form-control" id="email" name="email">
        </div>
        <div class="form-group set_error">
          <label>Gender:</label><br>
          <input type="radio" name="gender" value="male">Male
          <input type="radio" name="gender" value="female">Female
        </div>
        <div class="form-group">
          <textarea name="address" id="address" class="form-control"></textarea>
        </div>      
        <input type="submit" name="submit" value="Submit" class="btn-primary form-control">
      </form>
    </div>    
  </body>
</html>

HTML form validation Using the jQuery Validation Plugin

HTML form को jquery validation plugin से validation करने के लिए पहले तो हमें jquery validation plugin jquery HTML file में include करनी होती है!.

Jquery

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script>

HTML form

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Form Validation Using Jquery</title>   
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script> 
  </head>
  <body>
    <style>.error{color: red;}</style>
    <div class="container">
      <form action="" method="post" id="formID">
        <div class="form-group"><h3>Form validation with jquery plugin</h3></div>        
        <div class="form-group">
          <label for="fname">First name:</label>
          <input type="text" class="form-control" id="fname" name="fname">
        </div>
        <div class="form-group">
          <label for="lname">Last name:</label>
          <input type="text" class="form-control" id="lname" name="lname">
        </div>    
        <div class="form-group">
          <label for="fname">Username:</label>
          <input type="text" class="form-control" id="username" name="username">
        </div>
        <div class="form-group">
          <label for="fname">Password:</label>
          <input type="text" class="form-control" id="password" name="password">
        </div>
        <div class="form-group">
          <label for="fname">Confirm Password:</label>
          <input type="text" class="form-control" id="c_password" name="c_password">
        </div>
        <div class="form-group">
          <label for="fname">Email:</label>
          <input type="text" class="form-control" id="email" name="email">
        </div>
        <div class="form-group set_error">
          <label>Gender:</label><br>
          <input type="radio" name="gender" value="male">Male
          <input type="radio" name="gender" value="female">Female
        </div>
        <div class="form-group">
          <textarea name="address" id="address" class="form-control"></textarea>
        </div>      
        <input type="submit" value="Submit" class="btn-primary form-control">
      </form>
    </div>    
  </body>
</html>

Jquery Validation plugin script code

<script>
      $( document ).ready( function(){ 
        $('form[id="formID"]').validate({
            rules: {
              fname: 'required',
              lname: 'required',
              username: {
                required: true
              },
              password: {
                required: true,
                minlength: 8,
              },
              c_password : {
                required: true,
                minlength : 8,
                equalTo : "#password"
              },
              email: {
                required: true,
                email: true
                //remote:'check-email.php'
              },
              gender:{ required:true },
              address: {
                required: true,
                rangelength:[10,250]
              }
            },
            messages: {
              fname: 'This field is required',
              lname: 'This field is required',
              username: 'This field is required',
              password: {
                minlength: 'Password must be at least 8 characters long'
              },
              c_password:'This field is required',
              email: {
                required: "Please enter your email address.",
                remote:"This email was already used for signing up."
              },
              gender: {
                required:"Please select a gender"
              }, 
              address:'This field is required'
            },
            errorPlacement: function(error, element) {
              if ( element.is(":radio") ) 
              {
                  error.appendTo( element.parents('.set_error') );
              }
              else 
              { // This is the default behavior 
                  error.insertAfter( element );
              }
            },
            submitHandler: function(form) {
              form.submit();
            }
          });
      });
    </script>

jQuery Validation Plugin code

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Form Validation Using Jquery</title>   
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> 
    <!-- <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script> -->
    <script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script> 

    <script>
      $( document ).ready( function(){ 
        $('form[id="formID"]').validate({
            rules: {
              fname: 'required',
              lname: 'required',
              username: {
                required: true
              },
              password: {
                required: true,
                minlength: 8,
              },
              c_password : {
                required: true,
                minlength : 8,
                equalTo : "#password"
              },
              email: {
                required: true,
                email: true
                //remote:'check-email.php'
              },
              gender:{ required:true },
              address: {
                required: true,
                rangelength:[10,250]
              }
            },
            messages: {
              fname: 'This field is required',
              lname: 'This field is required',
              username: 'This field is required',
              password: {
                minlength: 'Password must be at least 8 characters long'
              },
              c_password:'This field is required',
              email: {
                required: "Please enter your email address.",
                remote:"This email was already used for signing up."
              },
              gender: {
                required:"Please select a gender"
              }, 
              address:'This field is required'
            },
            errorPlacement: function(error, element) {
              if ( element.is(":radio") ) 
              {
                  error.appendTo( element.parents('.set_error') );
              }
              else 
              { // This is the default behavior 
                  error.insertAfter( element );
              }
            },
            submitHandler: function(form) {
              form.submit();
            }
          });
      });
    </script> 
    
  </head>
  <body>  
    <style>.error{color: red;}</style>
    <div class="container">
      <form action="#" method="post" id="formID">
        <div class="form-group"><h3>Form validation with jquery</h3></div>        
        <div class="form-group">
          <label for="fname">First name:</label>
          <input type="text" class="form-control" id="fname" name="fname">
        </div>
        <div class="form-group">
          <label for="lname">Last name:</label>
          <input type="text" class="form-control" id="lname" name="lname">
        </div>    
        <div class="form-group">
          <label for="username">Username:</label>
          <input type="text" class="form-control" id="username" name="username">
        </div>
        <div class="form-group">
          <label for="password">Password:</label>
          <input type="text" class="form-control" id="password" name="password">
        </div>
        <div class="form-group">
          <label for="c_password">Confirm Password:</label>
          <input type="text" class="form-control" id="c_password" name="c_password">
        </div>
        <div class="form-group">
          <label for="email">Email:</label>
          <input type="text" class="form-control" id="email" name="email">
        </div>
        <div class="form-group set_error">
          <label>Gender:</label><br>
          <input type="radio" name="gender" value="male">Male
          <input type="radio" name="gender" value="female">Female
        </div>
        <div class="form-group">
          <textarea name="address" id="address" class="form-control"></textarea>
        </div>      
        <input type="submit" name="submit" value="Submit" class="btn-primary form-control">
      </form>
    </div>    
  </body>
</html>

Related Posts

Leave a Comment

Your email address will not be published. Required fields are marked *