How to check an email address in vanilla JS

In HTML5, you can use built-in form validation to check an email address. This works by setting the type="email" attribute on an input element. You might need to check an email address programmatically, though, so here are a few ways you can do that in vanilla JS.

Regular expression

Your first option is to use a regular expression.

Email inputs use the following regular expression under the hood:

/^[a-zA-Z0-9.!#$%&'*+\/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/

Source: 4.10.5.1.5 E-mail state (type=email) in the HTML Standard.

We can combine this with the RegExp.prototype.test() method to create a helper function:

/**
 * Check whether a string is a valid email address
 * (c) 2020 Kieran Barker, MIT License, https://barker.codes
 * @param {string} string The string to check
 * @returns {boolean} True or false
 */
function isValidEmail (string) {
  // The regular expression used by [type="email"]
  var regex = /^[a-zA-Z0-9.!#$%&'*+\/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/;

  // Test the string against the regular expression
  return regex.test(string);
}

You can use it by passing in the email input's value property:

// Get the first email input on the page
var emailInput = document.querySelector("[type='email']");

if (isValidEmail(emailInput.value)) {
  // It's a valid email address...
}

Constraint Validation API

You can also use the Constraint Validation API.

Assume you have an input element with its type attribute set to email.

You can use its validity property to get a ValidityState object. Then you can check the typeMismatch property of that object.

As explained in the MDN Web Docs, the typeMismatch property is:

A Boolean that is true if the value is not in the required syntax (when type is email or url), or false if the syntax is correct.

Therefore, we can create a helper function like so. Notice that I'm using the logical NOT (!) operator, because the property is true if the value is NOT in the required syntax:

/**
 * Check whether an email input is valid
 * (c) 2020 Kieran Barker, MIT License, https://barker.codes
 * @param {HTMLInputElement} input The input to check
 * @returns {boolean} True or false
 */
function isValidEmail (input) {
  // If this isn't an email input, do nothing
  if (input.type !== "email") return;

  // Get the input's validity
  return !input.validity.typeMismatch;
}

We use this helper function by passing in the input element itself. Notice that I pass in emailInput and not emailInput.value:

// Get the first email input on the page
var emailInput = document.querySelector("[type='email']");

if (isValidEmail(emailInput)) {
  // It's a valid email address...
}

Browser support

The RegExp.prototype.test() method is supported back to IE6.

The ValidityState.typeMismatch property is supported back to IE10.

For more information, check out the compatibility data on Can I Use:

Bouncer: a lightweight plugin

If you want a simple plugin, my friend Chris Ferdinandi maintains Bouncer: a lightweight form validation script that augments native HTML5 form validation elements and attributes.

All you have to do is add standard validation attributes to your form, initialize the script, and away you go.

Summary

In vanilla JS, you can use a regular expression or the Constraint Validation API to check an email address. You can also use Bouncer, a lightweight form validation script my friend Chris Ferdinandi maintains.