Can you imagine a website without any form? I bet you cannot. Neither can we. Web forms have become one of the essential elements of web interfaces. Whether it is a compact landing page or big multinational website, chances are there will be at least one small single-field form that will pop-up to ask for your email address.

Speaking of which, much like web forms that are increasingly popular these days, the email address field is another star of the show. It is seen everywhere. The main reason for that is that it underlies all the marketing strategies, providing essential information to communicate with the user. Therefore, knowing how to handle and validate an email address with JavaScript is highly important.

Types of Email Address Validation

Validation of email address is essential. Although the only way to check whether it exists or not is to send an email and see whether it bounces or not, JavaScript authentication still helps a lot. It performs data format validation that, in majority cases, allows getting the real information from the engaged customer.

There are four steps for error-proof email address validation:

  • Default browser HTML5 validation.
  • Client-side validation with the help of JavaScript.
  • Server-side validation with the help of PHP or any other server-side language.
  • Email marketing validation where you test the address against various criteria like blacklists, etc.

Usually, the first two options are enough to validate email addresses. Therefore, since the browser does the HTML validation automatically, all we need to know is how to validate an email address with JavaScript.

How to Validate Email Address with JavaScript

Validating email addresses with JavaScript can be tricky and challenging, especially for newbies. It is one of those cases when you should not reinvent the wheel. Instead, you should follow the wisdom of other professionals and adopt solutions that have been already tested.

The deal is, the best way to validate an email address is to use a regular expression. However, as we all know, RegEX is not for the faint-hearted. To create something from scratch with it will take lots of time and nerve. Therefore, it is highly recommended to test some time-proven solutions and find the best match for your situation.

Basics of Email Address Validation

First things first. What is the main principle of email address authentication? It is to check whether the string has a proper format and allowed characters. So, let us clear things up.

Email address is a string that is split into two by the «@» symbol. As a result, we should have two parts.

The first part is the name of the user, which can consist of:

  • Uppercase letters (A-Z)
  • Lowercase letter (a-z)
  • Numbers (0-9)
  • Punctuation marks (),:;<>@[\]
  • Special characters !#$%&’*+-/=?^_{|}~
  • The special character “.”

There are three crucial things to note here:

  1. You can use a dot sign only in the middle of the string. It means you are not allowed to start your email address with a dot. In addition, you are not allowed to use it one after another and at the end of the email name, so as before the “@” sign.
  2. In 2012, IETF released RFC 6530 protocol that allowed addresses with non-Latin characters. It means that you can use Cyrillic or Chinese symbols to create an email address. I bet you start to see a problem now. However, not everything is that bad. According to statistics, majority users on the web still prefer to use Latin characters. What’s more, email services of non-Latin countries, like, for example, Yandex or Mail.ru, do not allow registering an email address with non-ASCII characters unless it is the domain part. Therefore, you can leave this problem for now.
  3. The name could not be longer than 63 characters.

The second part is the domain which also has several restrictions. It should contain only

  • letters,
  • digits,
  • hyphens,
  • dots.

And, it is here where you need to worry about the non-Latin alphabet.

Email Address Validation with RegEx

As we have formulated the rules, it is time to find the best Regular expression to meet all the requirements. Sadly, there is no perfect email regular expression, but there are some time-tested solutions.

The first one is based on RFC 5322 Official Standard. It is very-very long but undoubtedly effective. It looks like this:

var re = (?:[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*|"(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21\x23-\x5b\x5d-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])*")@(?:(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?|\[(?:(?:(2(5[0-5]|[0-4][0-9])|1[0-9][0-9]|[1-9]?[0-9]))\.){3}(?:(2(5[0-5]|[0-4][0-9])|1[0-9][0-9]|[1-9]?[0-9])|[a-z0-9-]*[a-z0-9]:(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21-\x5a\x53-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])+)\]);

To use it on your page, you can create a function to test fields with it. For this, we are going to use the JavaScript ReGex version:

var re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/

Here is an example of the test function:

function validateEmail(email) {
    var re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
    return re.test(String(email).toLowerCase());
}

As we have said earlier, you should be ready for situations when email addresses have Unicode characters. The following regular expression takes this into account.

var re = /^(([^<>()\[\]\.,;:\s@\"]+(\.[^<>()\[\]\.,;:\s@\"]+)*)|(\".+\"))@(([^<>()[\]\.,;:\s@\"]+\.)+[^<>()[\]\.,;:\s@\"]{2,})$/i;

For those who do not like extended tricky regular expressions, there are some shorter and simpler solutions. Although they are not as comprehensive as the first one, nevertheless they still work and can be appropriate for your particular situation. For instance, this one helps to catch the most obvious mistakes:

var re = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;

The web is teeming with various solutions. However, we are going to stop on the one that is highly recommended by the Stackoverflow community whose members have tested it numerous times:

var re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;

Let us put everything together so that you can see the overall picture. Here is an example of a JavaScript function that validates an email address and shows the result in either red or green color:

function validateEmail(email) {
  var re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
  return re.test(email);
}

function validate() {
  var $result = $("#result");
  var email = $("#email").val();
  $result.text("");

  if (validateEmail(email)) {
    $result.text(email + " is valid :)");
    $result.css("color", "green");
  } else {
    $result.text(email + " is not valid :(");
    $result.css("color", "red");
  }
  return false;
}

$("#validate").on("click", validate);

Here is the HTML code with the form:

<form>
  <p>Enter an email address:</p>
  <input id='email'>
  <button type='submit' id='validate'>Validate!</button>
</form>

<h2 id='result'></h2>

Wrapping Up

Like it or not, but your online venture cannot survive without web forms, and particularly the email address field. Knowing how to validate an email address with JavaScript is a must-have. It will save you from the unfortunate consequences of populating your subscription list with incorrect or invalid emails.

Finally, note that JavaScript validation is just the first step in proper authentication. Always do server-side validation and check email addresses in your subscription list with email marketing tools.