How to validate email using jQuery?


To validate email using jQuery, use the regex pattern. You can try to run the following code to learn how to validate email using jQuery −

Example

Live Demo

<!DOCTYPE html>
<html>
  <head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script>  
    $(document).ready(function() {
      $('.error').hide();
      $('#submit').click(function(){
        var name = $('#name').val();
        var email = $('#email').val();

        if(name== ''){
          $('#name').next().show();
          return false;
        }
        if(email== ''){
          $('#email').next().show();
          return false;
        }
        if(IsEmail(email)==false){
          $('#invalid_email').show();
          return false;
        }
        $.post("", $("#myform").serialize(),  function(response) {
          $('#myform').fadeOut('slow',function(){
          $('#correct').html(response);
          $('#correct').fadeIn('slow');
       });
     });
    return false;
  });
 });
 function IsEmail(email) {
  var regex = /^([a-zA-Z0-9_\.\-\+])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
  if(!regex.test(email)) {
    return false;
  }else{
    return true;
  }
}
</script>
</head>
<body>
  <form action="" method="post" id="contactform">
  <table class="mytable">
    <tr>
     <td><label for="name">Name :</label></td>
     <td class="name"> <input name="name" id="name" type="text" placeholder="Please enter your name" class="contact-input"><span class="error">Enter your name here</span></td>
    </tr>
    <tr>
     <td><label for="email">Email :</label></td>
       <td class="email"><input name="email" id="email" type="text" placeholder="Please enter your email" class="contact-input"><span class="error">Enter your email-id here</span>
         <span class="error" id="invalid_email">Email-id is invalid</span>
       </td>
     </td>
    </tr>
    <tr>
     <input type="submit" class="contactform-buttons" id="submit"value="Send" />
     <input type="reset" class="contactform-buttons" id="" value="Clear" />
   </tr>
  </tr>
</table>
</form>
  <div id="correct" style="color:gray;"></div>
</body>
</html>

Updated on: 20-Jun-2020

10K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements