5 Ways to Implement Email Validation in Yup

Ensuring email addresses are valid in Yup is a fundamental step for clean data. We'll walk through five different implementation methods, providing code for each. Then, we'll examine the common shortcomings of these techniques and introduce how Abstract API overcomes them for more reliable validation.

How to Implement Email Validation in Yup

Here are three common methods to validate email addresses with Yup. Each approach offers a different level of control and complexity for your data validation schemas.

The Built-in string().email() Method

The "email()" function attaches Yup’s default regex, which is the same pattern browsers use for an email input field. This method catches obvious formatting errors with no extra configuration, as shown in the npmjs.com documentation. Because the pattern is intentionally permissive, some invalid strings like “user@example.com..au” may pass.

The "email()" function also does not treat an empty string as invalid. To flag empty strings, you must also chain the "required()" function, a detail noted in a discussion on Lightrun.

import * as yup from 'yup';
const schema = yup.object({
  email: yup.string().email('Malformed').required()
});

Explicit Regex with matches()

The "matches()" function allows you to use any custom regular expression for validation. A tight pattern can enforce stricter rules, such as to forbid double dots, require a public suffix, or lock the domain to internal zones. If you need to allow optional emails without a separate "required()" call, you can use "excludeEmptyString", as suggested by the package documentation.

const EMAIL_RE = /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i;
const schema = yup.object({
  email: yup.string().matches(EMAIL_RE, 'RFC-like').required()
});

Delegation to validator.js with test()

You can delegate validation to an external library like "validator.js" through the "test()" function. The "validator.js" library provides a battle-tested implementation that follows RFC 5322 edge cases better than most ad-hoc regular expressions. The "test()" function receives the raw value and runs your predicate.

It can also reuse Yup’s interpolation system for the error message, a feature highlighted in a GitHub issue discussion. This approach combines the robustness of a specialized library with the declarative structure of Yup.

import isEmail from 'validator/lib/isEmail';
const schema = yup.object({
  email: yup.string()
    .required()
    .test('is-valid', '${path} invalid', v => isEmail(v ?? ''))
});

Challenges of Email Validation in Yup

While these methods offer basic checks, they present significant challenges. The limitations of regular expressions and local validation often lead to both false positives and false negatives, undermining data quality.

• The built-in email method uses an outdated regex. It rejects valid but uncommon addresses with comments or international characters, and it accepts malformed strings with invisible characters or new top-level domains.
• All local validation, including the built-in email and matches methods, only confirms the string's format. It cannot detect non-existent domains, temporary inboxes, or spam-trap addresses, which leads to subsequent delivery failures.
• A custom regex with the matches method struggles with the full RFC grammar. Developers often write patterns that incorrectly block valid addresses that contain quotes or comments, which creates a poor user experience.
• To tighten rules, one must write a custom test function or replace the regex. This approach adds maintenance costs and introduces inconsistencies if multiple services depend on the same shared validation schema.