5 Ways to Implement Email Validation in React

Email validation is important for maintaining data quality in React applications. We'll explore five common ways to implement it, complete with working code snippets. We will also look at the pitfalls of these traditional methods and see how Abstract API helps overcome them.

How to Implement Email Validation in React

Here are four common methods to validate email addresses in a React application. Each approach has a different implementation, from native browser features to external libraries.

Browser Constraint Validation

React passes attributes directly to the DOM. When you render an input with `type="email"` and `required`, you get the browser's built-in pattern matching and validity API. This method works even before React hydrates, which supports progressive enhancement. It also adds zero extra bytes to your application bundle.

The code uses a `useRef` hook to get a direct reference to the input element. When the form submits, `e.preventDefault()` stops the default browser action. Then, `inputRef.current.reportValidity()` triggers the browser's validation UI. If the input is valid, you can access its value.

import { useRef } from 'react';

function EmailField() {
  const inputRef = useRef(null);

  function handleSubmit(e) {
    e.preventDefault();
    if (inputRef.current.reportValidity()) {
      // at this point inputRef.current.value is syntactically valid
    }
  }

  return (
    <form onSubmit={handleSubmit} noValidate>
      <input ref={inputRef} type="email" required />
      <button>Save</button>
    </form>
  );
}

Component-Level Regular Expression

This technique involves the use of a regular expression directly inside your React component to test the email format. The pattern is stored in a constant, for example, `EMAIL_RE`. The component state manages the email input's value and any validation error message.

An `onBlur` event handler triggers the validation logic when the user moves focus away from the input field. The `EMAIL_RE.test(email)` function returns true if the email matches the pattern. Based on the result, the error state updates, and a message shows or hides. The pattern used is a common example.

import { useState } from 'react';

const EMAIL_RE = /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i;

function InlineRegex() {
  const [email, setEmail]   = useState('');
  const [error, setError]   = useState(null);

  function onBlur() {
    setError(EMAIL_RE.test(email) ? null : 'Invalid e-mail');
  }

  return (
    <>
      <input value={email} onChange={e => setEmail(e.target.value)}
             onBlur={onBlur} />
      {error && <span>{error}</span>}
    </>
  );
}

React-Hook-Form Pattern Rule

The `react-hook-form` library provides a `useForm` hook to manage form state and validation. It exposes a `register` function to connect inputs to the form's logic. You can declare validation rules directly in the `register` function's options object.

This includes a `required` rule for empty fields and a `pattern` rule that takes a regular expression. The library runs validation only on the fields that change, which avoids unnecessary renders. The `formState.errors` object contains any validation messages, which you can then display. This validation flow is efficient.

import { useForm } from 'react-hook-form';

function HookForm() {
  const { register, handleSubmit, formState:{ errors } } = useForm();
  return (
    <form onSubmit={handleSubmit(console.log)}>
      <input
        {...register('email', {
          required: 'E-mail is required',
          pattern : {
            value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i,
            message: 'Invalid e-mail'
          }
        })}
      />
      {errors.email?.message}
      <button>Go</button>
    </form>
  );
}

External Validation Library

Libraries like `validator.js` offer pre-built functions for common validation tasks. This abstracts away the complexity of regular expressions. You can install it with `npm install validator`. After you import the library, you can call functions like `validator.isEmail()` directly.

This function takes a string as an argument and returns a boolean that indicates if the string is a valid email format. In the example, the component uses an `onChange` handler to call `validator.isEmail()` on every keystroke. This provides immediate feedback to the user, as shown in this common implementation.

import validator from 'validator';
import { useState } from 'react';

function ValidatorLib() {
  const [msg, setMsg] = useState('');
  return (
    <>
      <input onChange={e =>
        setMsg(validator.isEmail(e.target.value)
               ? '✓'
               : 'Enter a valid e-mail')
      } />
      <span>{msg}</span>
    </>
  );
}

The Challenges of Email Validation

The common methods for email validation in React share fundamental limitations. They primarily check for syntax and cannot confirm if an email address actually exists or can receive mail, which creates several problems.

• A regex that fully complies with email standards is complex and hard to maintain. Simpler patterns, used in component-level or `react-hook-form` validation, often reject valid emails or accept invalid ones, which leads to inaccurate results.
• Browser constraint validation is inconsistent. The HTML5 specification for `type="email"` is loose, so behavior differs across browsers. This native validation can also interfere with libraries like `react-hook-form`, which causes unpredictable outcomes for the user.
• React's asynchronous state updates create race conditions. Validation logic in controlled components might use stale state values. This results in a mismatch between client-side and server-side validation, which produces hard-to-debug errors.
• All front-end methods, from browser validation to external libraries, only check syntax. They cannot verify if a mailbox exists or can receive emails. This check requires server-side network calls, a step beyond React's scope.