Demo Download

In this tutorial, I will show you how to validate email address in JavaScript. Email address validation is very common task which you will need to perform on several HTML forms such as user registration form, user login form or any other form which is taking user email address as input.

Although HTML 5 also provides an input type email (type=”email”) which also validate email address format but it will accept incomplete email address.

For example if you type this email “myname@gmail” so it will consider this email as valid. However this email address is incorrect.

Therefore, I will use both input type email and JavaScript method as well to validate the email address on the client side, so that I get the valid email address after the form submission.

There are various ways and functions in which you can do email validation in JavaScript.

I will create a JavaScript function for email validation and I will set a pattern in this function and then if a variable passed the test of that pattern then the email is valid.

JavaScript Email Address Validation

Here is the code for email validation using JS, just create an index.html file and paste the following HTML code in it.

HTML Code:

<form action="" name="myform" method="post" onsubmit="return formSubmit();">
    <label for="email"><strong>Enter Your Email</strong></label><br>
    <input type="email" name="email" id="email" placeholder="[email protected]" 
            autofocus/><br>
    <input type="submit" value="Submit">
</form>

This is just a simple HTML form which is taking email address as input and on form submit it is executing the function formsubmit().

Now, add the following two JavaScript Function in the bottom of the same page before </body> tag.

JavaScript Code:

//Email address validation function	
function isValidEmail(email) {
    var pattern = /^([a-z\d!#$%&'*+\-\/=?^_`{|}~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]+(\.[a-z\d!#$%&'*+\-\/=?^_`{|}~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]+)*|"((([ \t]*\r\n)?[ \t]+)?([\x01-\x08\x0b\x0c\x0e-\x1f\x7f\x21\x23-\x5b\x5d-\x7e\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]|\\[\x01-\x09\x0b\x0c\x0d-\x7f\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))*(([ \t]*\r\n)?[ \t]+)?")@(([a-z\d\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]|[a-z\d\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF][a-z\d\-._~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]*[a-z\d\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])\.)+([a-z\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]|[a-z\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF][a-z\d\-._~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]*[a-z\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])\.?$/i;
    return pattern.test(email);
};

//Function to execute on form submit
function formSubmit(){
    let email = document.getElementById('email');
    if(email.value==''){
        alert("Please enter your email address!");
        email.focus();
        return false;
    }else if(!isValidEmail(email.value)){
        alert("Provided email address is incorrect!");
        email.focus();
        email.select();
        return false;
    }
}

The above JavaScript code having one function which is validating the email address and other function which will be executed on the form submission.

This function first check if email address is empty then give alert to the user and focus back to email field and if email is not empty then perform the validation of the email address using JavaScript.

It is possible that JavaScript validation can be skipped by user because user can easily disable JavaScript on the browser.

So there are chances that your JS email validation will not work, if someone forcefully disable JavaScript in browser and you have no control over user’s browser settings.

But there is a way of validation which is not possible to skip by user and that is a server sider validation using PHP.

I have also shared a tutorial on how to validate email address in PHP. You should use client side and server side validation on your forms.

Conclusion

I hope by now you know how to how to validate email address in JavaScript. I have shared a very useful function for email validation in JavaScript. This will validate your input email address and help you to get the data in correct format.

If you found this tutorial helpful, share it with your friends and developers group.

I spent several hours to create this tutorial, if you want to say thanks so like my page on Facebook, Twitter and share it.

Demo Download

Facebook Official Page: All PHP Tricks

Twitter Official Page: All PHP Tricks