Form Validation

Form Validation:


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Untitled Document</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript">
      $(document).ready(function(){
          $(document).on('click', '#btn1', function(){
              var firstname=$('#user').val();
              var lastname=$('#pass').val();
              var mobile=$('#mob').val();
                if(firstname == ""){
                     $('#err1').css('display', 'block');
                    }
                else{
                      $('#err1').css('display', 'none');
                    }
                   
                   
                if(lastname == ""){
                     $('#err2').css('display', 'block');
                    }
                else{
                      $('#err2').css('display', 'none');
                    }
                if(mobile == ""){
                     $('#err3').css('display', 'block');
                    }
                else{
                      $('#err3').css('display', 'none');
                    }
              });
             
              $(document).on('keyup', '#user', function(){
                  if($(this).val() == ""){
                     $('#err1').css('display', 'block');
                  }
                  else{
                      $('#err1').css('display', 'none');
                    }
              });
              $(document).on('keyup', '#pass', function(){
                  if($(this).val() == ""){
                     $('#err2').css('display', 'block');
                  }
                  else{
                      $('#err2').css('display', 'none');
                    }
              });
              $(document).on('keyup', '#mob', function(){
                  if($(this).val() == ""){
                     $('#err3').css('display', 'block');
                  }
                  else{
                      $('#err3').css('display', 'none');
                    }
              });
         
          });
    </script>
    <style type="text/css">
      #err1,#err2,#err3{display:none;color:#ff0000;}
    </style>
  </head>
 
  <body>
    <form action="#">
      First name:<br>
      <input type="text" id="user" name="firstname" value="">
      <span id="err1">Please Enter FirstName</span>
      <br><br>
      Last name:<br>
      <input type="text" id="pass" name="lastname" value="">
      <span id="err2">Please Enter LastName</span>
      <br><br>
      Mobile:<br>
      <input type="number" id="mob" name="mobile" value="">
      <span id="err3">Please Enter MobileNumber</span>
      <br><br>
      <input type="button" id="btn1" value="Submit">
    </form>
  </body>
</html>

Comments

Post a Comment