Customise Yup’s default error messages

Add the following code somewhere (e.g., src/bootstrap.ts):

import { setLocale } from 'yup'
import capitalize from 'lodash/capitalize'

// Customise Yup's default error messages:
// https://github.com/jquense/yup#error-message-customization
setLocale({
  string: { email: 'Please enter a valid email address' },
  mixed: { required: ({ path }) => `${capitalize(path)} is a required field` },
})

Then make sure this code runs before you use start using Yup elsewhere. For example, you might put the setLocale call in a src/bootstrap.ts file and then include src/bootstrap.ts near the top of a src/App.tsx.

Sources

• Error customisation – Yup docs