How to customize yup validation messages?

Question

Most answers I have seen customize yup validation messages when defining a schema, e.g.

const personSchema = yup.object().shape({
    firstName: yup.string().required('First name is a required field'),
    lastName: yup.string().required('Last name is a required field'),
});

But what if I want to customize the default validation message itself? For example, required fields should always render a fixed string "Required field".

Bricker

Answer 1

You could do it by using setLocale function from yup like this:

  import * as Yup from 'yup';

  Yup.setLocale({
    mixed: {
      required: 'Required Field',
    },
  });

For more information check the documentation: https://github.com/jquense/yup

The section Using a custom locale dictionary is what you need.

Chatav

Answer 2

I found that the accepted answer is correct but can be incomplete in some cases. Placing the cursor into a field and tabbing out of it can trigger a Yup "type error".

A default Yup type error is a verbose and non-user-friendly thing ;)

I would extend the answer from AndreasT to read:

const personSchema = yup.object().shape({
firstName: yup.string().required().typeError('first name is a required field'),
lastName: yup.string().required().typeError('Last name is a required field'),});

Fetch

Answer 3

You do not need to do much. Just include your custom message for required inside the required function. You can also include separate messages for regex pattern

 fname: yup
      .string()
      .required('Please enter your first name *')
      .matches(
        /^[a-zA-Z]+(([',. -][a-zA-Z ])?[a-zA-Z]*)*$/,
        "Enter valid first name !"
      ),

Loutish