Live email validation using jQuery

Though server-side email validation is a secure way of validating email, still with server-side validation, client-side validation using JavaScript can increase the user experience.

Here in this tutorial, we are going to see how to validate email in live using jQuery with example code snippets.

Before we go forward let’s create our HTML:

<form method="post" action="action_page.html" id="myform">
   <input type="text" name="email" id="email"/>
   <label id="error_email" style="color: red;"></label>
   <br/>
   <input type="submit" name="submit" id="submit-email"/>
</form>

In the above code, we have created an HTML form. We have set the form id, email text field and the submit button which will go to be used in jQuery. We have also created a label tag with id “error_email” which will contain the live validation warning in red color.

Copy text to clipboard on click using JavaScript

Disable right click, copy, cut on web page using jQuery



Now let’s see our JavaScript code.

We are going to use the jQuery here. At first, we are going to check if the email format is valid or not while typing in the email text field. We want to check the email input field live. So we are going to use the jQuery keyup method. The keyup() method triggers the keyup event of the selected element. So whenever you press the inside of the text input box and then leave the key, it will call the function.

See the jQuery code below:

$("#email").keyup(function(){

     var email = $("#email").val();
     var filter = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;

     if (!filter.test(email)) {
       //alert('Please provide a valid email address');
       $("#error_email").text(email+" is not a valid email");
       email.focus;
       //return false;
    } else {
    	  $("#error_email").text("");
    }

 });

The above jQuery code will check the email if it is a valid email or not every time the keyup event occurs. If the email is not a valid email then it will show a text in red like “myemail is not a valid email”. This text appearing on the label tag with id “error_email” that we set in the HTML.

Live word counter from HTML textarea in JavaScript

Immediately submit upload form after selecting file

Well, this is not enough. If you submit the form even after you see the red error text, the form will still be submitted. To prevent the form submission if the email is not a valid email, below is the jQuery code:

$("#submit-email").click(function(){

    var email = $("#email").val();
    var filter = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;

    if (!filter.test(email)) {
       alert('The email address you provide is not valid');
       $("#email").focus();
       return false;
    } else {
    	 
    }

 });

In the above code, we just check if the label with id “error_email” is blank or not. If it is not blank, then it will alert message “The email address you provide is not valid” as we know that if the “error_email” element is not blank then it means the email is invalid and then it returns false which means the form will not be submitted.

Detect arrow key press in JavaScript

In else we have not write any code. That means it will continue the normal flow of the form. That means the form will be submitted.

Now below is the complete jQuery code:

$("#email").keyup(function(){

     var email = $("#email").val();
     var filter = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;

     if (!filter.test(email)) {
       //alert('Please provide a valid email address');
       $("#error_email").text(email+" is not a valid email");
       email.focus;
       //return false;
    } else {
    	  $("#error_email").text("");
    }

 });


$("#submit-email").click(function(){

    var email = $("#email").val();
    var filter = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;

    if (!filter.test(email)) {
       alert('The email address you provide is not valid');
       $("#email").focus();
       return false;
    } else {
    	  
    }

});

We can test it in our browser and we see that when we start typing in the email field, it will show the email not a valid email until the email is in a correct format. The form will also be submitted if no validation error text in red color appears. If there are any validation error will found then clicking the submitted button will show an alert message and it will not let the form be submitted.

Leave a Reply

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