How to Validate an Email Address in JavaScript

Validating an email address is a common operation when processing a form. Whether it’s for contact forms, signup forms, or login forms, it’s important to ensure that the email address entered by the user is valid. In this blog, we will explore the correct way to validate an email address using plain JavaScript.

Rules for Email Validation

An email address is composed of two parts: the local part and the domain part. The local part can contain alphanumeric characters, punctuation, special characters, and a dot. However, the dot cannot be the first or last character and it cannot be repeated. The domain part can contain alphanumeric characters and hyphens, but the hyphen cannot be the first or last character and it can be repeated.

Using Regular Expressions for Email Validation

The best way to validate an email address is by using a regular expression. However, it’s important to note that there is no universal email check regex. Different people use different regular expressions, and many of the regexes you find online may fail to accurately validate basic email scenarios. Additionally, they may not account for newer domains or internationalized email addresses.

To ensure accuracy, it’s important to thoroughly test and verify the regular expression before using it. You can check out the example on Glitch, where you can compare different regexes against a list of valid email addresses. The current regex provided in the example is considered to be the most accurate one available, although it has a few minor issues.

A Function to Validate Email Addresses

Here is a function that validates an email address using the regex mentioned above:

const validate = (email) => {
  const expression = /(?!.\*\.{2})^([a-z\d!#$%&'\*+\-\/=?^\_`{|}~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]+(\.[a-z\d!#$%&'\*+\-\/=?^\_`{|}~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]+)\*|"((([ \t]\*\r\n)?[ \t]+)?([\x01-\x08\x0b\x0c\x0e-\x1f\x7f\x21\x23-\x5b\x5d-\x7e\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]|\\[\x01-\x09\x0b\x0c\x0d-\x7f\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))\*(([ \t]\*\r\n)?[ \t]+)?")@(([a-z\d\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]|[a-z\d\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF][a-z\d\-.\_~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]\*[a-z\d\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])\.)+([a-z\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]|[a-z\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF][a-z\d\-.\_~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]\*[a-z\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])\.?$/i;

  return expression.test(String(email).toLowerCase());
};

This function satisfies most common cases, ensuring that 99.9% of the email addresses entered by users are successfully validated.

A Simpler Regex Alternative

If you prefer to use a simpler regex, you can check that the address entered contains something, followed by an @ symbol, and then something else. However, this simpler regex may result in more false positives. It is important to remember that the ultimate test for email address validity happens when you ask the user to click something in the email to confirm the address.

1 2	const expression = /\S+@\S+/; expression.test(String('[[email protected]](/cdn-cgi/l/email-protection)').toLowerCase());

Validating Email Addresses in HTML Input Fields

In HTML5, you can use the email field type to validate email addresses directly in the input field. For example:

1	<input type="email" name="email" placeholder="Your email" />

Please note that the results may vary depending on the browser implementation. You can refer to a Glitch example for testing the same emails with the regex and their validation results using HTML form validation.

Server-Side Validation

If your application has a server, it is important to validate the email address on the server-side as well. This is necessary because client-side code cannot be trusted, and JavaScript may be disabled on the user’s browser. If you are using Node.js, you can reuse the same validation function mentioned earlier on the server-side. You can also consider using pre-made packages like isemail, although results may vary.

To see the benchmark of isemail on the same emails used in the previous examples, you can visit the following link: glitch.com/edit/#!/flavio-email-validation-node-isemail

tags: [“email validation”, “JavaScript”, “regular expression”, “HTML5 input”, “server-side validation”]