How to validate an email address in JavaScript

This is why a list must regularly be cleaned and invalid addresses deleted to preserve its quality, optimize your mailings' deliverability rate, and increase your email marketing campaigns' success.

Verify an email address in JavaScript using regular expressions

You may want to implement a simple email address format validator on the client-side, so when your visitors enter their email address in your forms, the address format gets validated before reaching your server.

Using regular expression is probably the best approach. Let’s see the most simple syntax:

function validateEmail(email) {
  const re = /^\S+@\S+$/;
  return re.test(String(email).toLowerCase());
}

This is a breakdown of the regular expression /^\S+@\S+$/:

• ^ a the beginning of a regex: match the start of the string
• \S+ match one or more non-whitespace characters
• @ match the sign "@"
• \S+ match one or more non-whitespace characters
• $ match then end of the string

This regular expression verifies that the email address contains no space and is composed of one or more characters followed by the "@" sign followed by one or more characters.

This seems to be enough for most email addresses, but in reality, it would reject some valid email because whitespace characters are actually allowed as long as they are escaped. For example, the following is a valid email and would be rejected by the code mentioned above:

"very.(),:;<>[]\".VERY.\"very@\\ \"very\".unusual"@strange.example.com

At this point, you may want to continue in the same direction and try to use an email regex guide to consider every case.

For example, you could try to match escaped or quoted whitespaces. If you do so, you will also have to implement all specific cases, including Unicode characters and much more. Then you will end up with a regex impossible to debug and particularly impossible to test.

If you're looking for alternatives to JavaScript, or you just want to learn how it's done using other languages, feel free to check out our guide for validating email addresses in PHP and a second one for using Python to validate emails.

How to efficiently validate an email address

As demonstrated above, efficiently verifying an email address format by yourself is not an easy task.

The only reliable way to verify an email address is to have the recipient’s SMTP server to validate it. And to do so, an email validator would need to go through the following steps: validate the domain name, search through its MX records, and query the SMTP servers.

Using Abstract API to validate an email address

If you're looking to simplify the process of email validation, you can review and choose one of the best email validation APIs to help you out.

Abstract provides an email validation API that solves this problem and takes away the complexity of this task. With a single call, you can validate the address format, check if the email is hosted on a free service if it is a disposable email, and much more.

After creating a free account at Abstract, which automatically generates your private API key, you can call the API and validate your visitors’ email addresses very easily.

Implementation example in JavaScript:

function httpGetAsync(url, callback) {
  var xmlHttp = new XMLHttpRequest();
  xmlHttp.onreadystatechange = function() {
    if (xmlHttp.readyState == 4 && xmlHttp.status == 200)
      callback(xmlHttp.responseText);
  }
  xmlHttp.open("GET", url, true); // true for asynchronous
  xmlHttp.send(null);
}

var url = "https://emailvalidation.abstractapi.com/v1/?api_key=YOUR-API_KEY&email=EMAIL_TO_VERIFY"

httpGetAsync(url)

This is an example of a response:

{
  "email": "johnsmith@gmail.com",
  "autocorrect": "",
  "deliverability": "DELIVERABLE",
  "quality_score": 0.90
  "is_valid_format": {
        "value": true,
        "text": "TRUE"
        },
  "is_free_email": {
        "value": true,
        "text": "TRUE"
        },
  "is_disposable_email": {
        "value": false,
        "text": "FALSE"
        },
  "is_role_email": {
        "value": false,
        "text": "FALSE"
        },
  "is_catchall_email": {
        "value": false,
        "text": "FALSE"
        },
  "is_mx_found": {
        "value": true,
        "text": "TRUE"
        },
  "is_smtp_valid": {
        "value": true,
        "text": "TRUE"
        }
}