How to validate an email address in JavaScript?

Start with HTML: <input type="email" required> makes the browser check the format before the form is submitted, with no JavaScript. When you need a check outside a form, use a simple regex that catches typos. No check can tell you whether the address exists, though; only a confirmation email can.

<form>
  <label for="email">Email</label>
  <input
    id="email"
    name="email"
    type="email"
    autocomplete="email"
    required
  >
  <button>Subscribe</button>
</form>

The browser blocks the submit and shows a message when the field is empty or doesn't look like an email. It also strips spaces from the start and end of the value, and phones show a keyboard with @.

The browser's rule is loose on purpose. It accepts name@localhost, because the part after @ doesn't need a dot.

Checking it in JavaScript

The input's validity state tells you what's wrong. To show your own error message instead of the browser's bubble, add novalidate to the form and check the field on submit:

<form class="signup" novalidate>
  <label for="email">Email</label>
  <input
    id="email"
    name="email"
    type="email"
    autocomplete="email"
    required
    aria-describedby="email-error"
  >
  <p id="email-error" class="error" aria-live="polite"></p>
  <button>Subscribe</button>
</form>

const form = document.querySelector('.signup');
const email = form.elements.email;
const error = document.querySelector('#email-error');

form.addEventListener('submit', (event) => {
  if (email.checkValidity()) {
    error.textContent = '';
    return;
  }

  event.preventDefault();
  error.textContent = email.validity.valueMissing
    ? 'Enter your email address.'
    : 'Check your email address for typos.';
});

checkValidity() returns false if any constraint fails. validity.valueMissing is true for an empty required field, and validity.typeMismatch is true when the value doesn't look like an email.

A simple regex

Outside a form, for example when validating data before an API call, use a short pattern: something without spaces, an @, something without spaces, a dot, and something without spaces. Trim the value first.

const EMAIL_RE = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

function isValidEmail(value) {
  return EMAIL_RE.test(value.trim());
}

isValidEmail('ada@example.com');       // true
isValidEmail(' ada@example.com ');     // true
isValidEmail('name+news@example.com'); // true
isValidEmail('ada.example.com');       // false
isValidEmail('ada@example');           // false
isValidEmail('ada @example.com');      // false
isValidEmail('ada@@example.com');      // false

Remember to save the trimmed value too, not only to test it.

Skip the huge "RFC-compliant" regexes you'll find online. They're unreadable, they still disagree with real mail servers on edge cases, and they can't tell you any more than the short one: whether the string looks like an email.

Don't over-restrict

These are all valid, and strict home-made patterns often reject them:

• name+news@example.com: plus addressing, which people use for filtering.
• o'brien@example.ie: apostrophes are allowed.
• ada@mail.example.co.uk: subdomains and two-part endings.
• ada@example.photography: long top-level domains.
• Ada@Example.com: uppercase letters.

A pattern like /^[a-z0-9.]+@[a-z]+\.[a-z]{2,3}$/ rejects every one of them. A user who can't sign up with their real address just leaves.

The only real validation

A regex can't tell you that an address exists or that it belongs to the person typing it, and ada@gmial.com passes every format check. If the address matters, send a confirmation email with a link or a code. For typos in popular domains, some sign-up forms also suggest a fix, like "Did you mean gmail.com?"

And validate on the server as well. Client-side checks are there to help the user, but anyone can send a request without your form.