How to Change Default Error Text in Yup/Formik?

How to Change Default Error Text in Yup/Formik

Formik and Yup are popular tools in the React ecosystem for handling forms and validation. While Formik manages form state, Yup offers schema-based validation. By default, Yup provides generic error messages, but customizing them can improve user experience. This guide will show you how to replace these default messages with custom error text.

The Problem

Consider the following Yup validation schema:

const schema = Yup.object({
  email: Yup.string().email().required('Please Enter your Email'),
  password: Yup.string()
    .required('Please Enter your password')
    .matches(
      /^(?=.*[A-Za-z])(?=.*\d)(?=.*[@$!%*#?&])[A-Za-z\d@$!%*#?&]{8,}$/,
      'Must Contain 8 Characters, One Uppercase, One Lowercase, One Number, and One Special Character'
    ),
})

Here, the required method uses a custom message ('Please Enter your Email'), but the .email() method defaults to its internal error text when validation fails. This inconsistency can confuse users.

The Solution

You can replace Yup's default error messages with custom ones by passing a string argument to the validation method. For example:

const schema = Yup.object({
  email: Yup.string().email('Invalid email format').required('Email is required'),
  password: Yup.string()
    .required('Password is required')
    .matches(
      /^(?=.*[A-Za-z])(?=.*\d)(?=.*[@$!%*#?&])[A-Za-z\d@$!%*#?&]{8,}$/,
      'Password must include 8 characters, an uppercase letter, a number, and a special character'
    ),
})

Handling Default Type Errors

Sometimes, Yup throws "type errors" for invalid input types. These can also be customized:

const schema = Yup.object({
  email: Yup.string()
    .email('Invalid email format')
    .required('Email is required')
    .typeError('Email must be a string'),
  password: Yup.string().required('Password is required').typeError('Password must be a string'),
})

Example with Formik

Below is a Formik example that integrates the customized Yup schema:

import React from 'react'
import { Formik, Field, Form, ErrorMessage } from 'formik'
import * as Yup from 'yup'

const validationSchema = Yup.object({
  email: Yup.string().email('Invalid email format').required('Email is required'),
  password: Yup.string()
    .required('Password is required')
    .matches(
      /^(?=.*[A-Za-z])(?=.*\d)(?=.*[@$!%*#?&])[A-Za-z\d@$!%*#?&]{8,}$/,
      'Password must include 8 characters, an uppercase letter, a number, and a special character'
    ),
})

const LoginForm = () => (
  <Formik
    initialValues={{ email: '', password: '' }}
    validationSchema={validationSchema}
    onSubmit={(values) => {
      console.log(values)
    }}
  >
    {() => (
      <Form>
        <div>
          <label>Email</label>
          <Field name="email" type="email" />
          <ErrorMessage name="email" component="div" className="error" />
        </div>
        <div>
          <label>Password</label>
          <Field name="password" type="password" />
          <ErrorMessage name="password" component="div" className="error" />
        </div>
        <button type="submit">Submit</button>
      </Form>
    )}
  </Formik>
)

export default LoginForm

FAQs

1. Can I reuse custom error messages across multiple fields?

Yes! Define constants for reusable error messages:

const REQUIRED = 'This field is required'
const INVALID_EMAIL = 'Invalid email format'

const schema = Yup.object({
  email: Yup.string().email(INVALID_EMAIL).required(REQUIRED),
  password: Yup.string().required(REQUIRED),
})

2. What happens if I don’t customize error messages?

If you don’t provide custom messages, Yup will use its default ones, which may not align with your application's tone or requirements.

3. Can I translate Yup error messages?

Yes, by integrating Yup with a translation library like i18next. Use the message argument in Yup methods to pass translated strings.

4. How do I debug complex validations?

Use the test method for custom validations and log errors inside it:

password: Yup.string()
  .required('Password is required')
  .test('is-strong', 'Password is too weak', (value) => {
    if (!value) return false
    console.log('Validating password:', value)
    return value.length >= 8
  })