How to Email Validation using jQuery

In this example, I explain email validation using jQuery. Email validation in jQuery using regular expression is most important when you get real email id.

We will create form and click button to validate email id. If email is invalid then display error message, otherwise display success message using regex in jQuery.

<!DOCTYPE html>
<html>
  <head>
      <title>How to email validation in jQuery</title>
</head>
<body>
    
    <form action="">
        <label for="email">Email</label>
        <input type="text" name="email" id="email" placeholder="Enter email">
        <span id="emailError"></span>
        <br><br>
        <input type="button" value="Submit" id="submitForm">
    </form>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script>  
    $(document).ready(function() {
      $('#submitForm').click(function(){
        var email = $('#email').val();
        var emailRegex = /^([a-zA-Z0-9_\.\-\+])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
        if(email ==""){
            $("#emailError").text("Please enter email").css("color","red");
        }else if(!emailRegex.test(email)){
            $("#emailError").text("Please enter valid email").css("color","red");
        }else{
            $("#emailError").text("Your email is valid").css("color","green");
        }
      });
    });
</script>
</body>
</html>

I hope you understand email validation using regular expression in jQuery and it can help you..

Read Also :  How to Allow only 10 Numbers in Textbox using jQuery