5 Ways to Implement Email Validation in JavaScript

Validating email addresses in JavaScript is a key step for maintaining data quality. We'll explore five ways to do this with working code snippets, examine the pitfalls of traditional methods, and see how Abstract API provides a more complete solution that addresses these shortcomings.

How to Validate an Email Address in JavaScript

This section covers five common methods for email validation. Each approach uses a different technique, from native browser features to external libraries and DNS checks.

HTML Constraint Validation API

This method uses the browser’s built-in parser that supports the <input type="email"> element. JavaScript's role is to trigger the validation check, not to maintain a complex pattern.

The browser’s implementation applies the WHATWG email grammar and automatically flags mismatches. The `checkValidity()` method on the input element returns a boolean that indicates if the email is valid.

<input id="mail" type="email" required>
<script>
function isValid() {
const el = document.getElementById('mail');
return el.checkValidity(); // boolean
}
</script>

A Single Regular Expression

This technique employs a single, complex regular expression that approximates the RFC 5322 standard. It is a pragmatic pattern designed to cover most production addresses, including quoted local parts and domain literals, as noted in online discussions.

The code defines a constant, `rfc5322`, which holds the pattern. The `test()` method of this regular expression is then called with the email address to return a true or false value.

const rfc5322 = /^(?:[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])?|\[(?:25[0-5]|2[0-4]\d|[01]?\d\d?)(?:\.(?:25[0-5]|2[0-4]\d|[01]?\d\d?)){3}\])$/i;

function isValid(email) {
return rfc5322.test(email);
}

The Validator.js Library

Another approach is to use a dedicated NPM package like `validator`. This library includes a maintained `isEmail` function that you can import into your project.

It offers several options, such as the ability to allow IP addresses in the domain, permit UTF-8 characters in the local part, and define a blacklist of hosts. The library works in both browser and Node.js environments.

import validator from 'validator';
validator.isEmail(addr, {
allow_ip_domain: true,
allow_utf8_local_part: true,
host_blacklist: ['example.com']
});

Live MX Record Check

This method checks if an email address's domain is configured to receive mail. It queries for the domain's Mail Exchange (MX) records.

The code sends a request to a DNS over HTTPS (DoH) endpoint that supports Cross-Origin Resource Sharing (CORS). A successful response with an "Answer" array indicates the domain has a valid MX record.

The `validate` function first extracts the domain from the email address. It then calls the `hasMx` function to perform the DNS lookup.‍

async function hasMx(domain) {
const url = `https://dns.google/resolve?name=${domain}&type=MX`;
const res = await fetch(url);
const { Answer } = await res.json();
return Array.isArray(Answer) && Answer.length > 0;
}

async function validate(email) {
const [, domain] = email.split('@');
return await hasMx(domain);
}

Challenges of JavaScript Email Validation

While the methods above offer starting points, they come with significant drawbacks. Effective email validation requires more than a pattern match, as many approaches fail to account for real-world deliverability and standards.

• A single regular expression cannot fully cover the complex RFC 5322 grammar. This approach leads to unreadable patterns that either reject valid mailboxes or permit invalid ones, a significant drawback for the single regex method.
• Client-side checks, like the HTML Constraint Validation API, cannot confirm deliverability. They lack the ability to perform DNS or MX record lookups, so they approve addresses at domains that cannot actually receive mail.
• Most validation methods, including simple regular expressions and the HTML API, ignore internationalization rules. They often break on valid global addresses that use Unicode characters in the local part or punycode for the domain name.
• Email providers define their own local-part rules, like case sensitivity or support for tags. A fixed client-side rule, whether from a regex or a library like Validator.js, risks the rejection of valid user addresses.