Best Way To Validate Email Address In JavaScript Regex

Do you want to validate an email address in JavaScript? And thinking what is the best possible way to get to do it? In this article, you will learn to validate email addresses in JavaScript using Regex with code examples.

String matching is accomplished through the use of regular expressions, which are patterns that match character combinations in strings. You can use the Regex Objects[1] in JavaScript to match any type of String you want.

Validate Email Address In JavaScript using Regex

When creating a regular expression pattern, you can use simple letters, such as the ABC pattern, or you can combine them with more complex characters, such as the ab*c pattern. In order to locate a straight match, a simple pattern is made up of characters you know you want to find quickly.

Also in email validation, you need to make sure that you are following an RFC 822 compliant Regex.

Let us see in the below example code how to validate the email address using Regex in JavaScript.

//JavaScript Code Example

function validateEmail(inputEmail){
    //Initializing Regex for Email
    const re = /^[a-z0-9._%+-][email protected][a-z0-9.-]+\.[a-z]{2,3}$/;

    return re.test(inputEmail);
}
var listEmails = ["[email protected]", "[email protected]", "[email protected]", "[email protected]", "[email protected]"]

listEmails.forEach(function(email){
    var isValid = validateEmail(email);
    if(isValid){
        console.log(email + " is Valid Email Address.");
    }else{
        console.log(email + " is Not Valid Email Address.");
    }
});

Output:

[email protected] is Not Valid Email Address.
[email protected] is Valid Email Address.
[email protected] is Not Valid Email Address.
[email protected] is Not Valid Email Address.
[email protected] is Valid Email Address.

As you can see in the above code, using the regex mentioned above you can filter out most of the incorrect email addresses. But you should also note that this regex will not eliminate the hundred percent of the incorrect email addresses.

There can be few cases less than one percent that still can go through this check as a pass. And hence you may need to filter those address manually or you can later add them in the code to check for specific cases.

And this is the most Simple email validation in JavaScript that you can use in your frontend code if required.

Best Way To Validate Email Address In JavaScript Regex

Validate Email Address Using HTML

If you are a frontend developer then you should always use the HTML inbuilt pattern matching code that filters out incorrect email addresses.

Let us see in the below example code how you can valid email addresses using HTML and no JavaScript.

<!-- HTML Code Example -->

e<!DOCTYPE html>
<html>
<body>

<p>Testing A Form to Check Email</p>

<form action="/do_something.html">
  E-mail: <input type="email" id="inputEmail" name="email" pattern="[a-z0-9._%+-][email protected][a-z0-9.-]+\.[a-z]{2,3}$">
  <input type="submit">
</form>

<script>
function confirmEmail() {
  var x = document.getElementById("inputEmail").pattern;
  //Pass this valid email to backend if required.
  document.getElementById("someElementPageId").innerHTML = x;
}
</script>

</body>
</html>

Output:

[email protected] is valid email address.

As you can see in the above code, I was able to create an input element as email, and HTML checks the text box internally to check if the input box contains a valid email address and additionally you can check the same email address with the regex pattern.

Wrap Up

I hope you got your answer related to how to validate email addresses using Regex in JavaScript or in HTML. It is really important that you are using the correct regex string that is as per the current standard used in the industry.

If you have any better method than the one discussed above then please let me know in the comment section I will be happy to add it here.

If you liked the above tutorial then please follow us on Facebook and Twitter. Let us know the questions and answer you want to cover in this blog.

Further Read:

  1. How To Make The First Letter Of A String Uppercase in JavaScript
  2. How To Test For An Empty Object In JavaScript
  3. Code Examples: How To Format A Date in JavaScript
  4. How To Remove First Character From A String in JavaScript
  5. How To Fix Cannot use import statement outside a module JavaScript
  6. How To Remove A Specific item From An Array
  7. Best Udemy JavaScript Course 2021
Best Way To Validate Email Address In JavaScript Regex

Leave a Comment