Conditional validation with Yup and Formik

Question

Here is my validation schema:

const validationSchema = Yup.object().shape({
      person: Yup.object().shape({
        name: Yup.string().required('Field is required'),
        surname: Yup.string().required('Field is required'),
        middleName: Yup.string().required('Field is required'),
        email: Yup.string()
          .email('Wrong e-mail format')
          .required('Field is required')
      }),
      company: Yup.object().shape({
        name: Yup.string().required('Field is required'),
        address: Yup.string().required('Field is required'),
        email: Yup.string()
          .email('Wrong e-mail format')
          .required('Field is required')
      })
    });

And also there are two variables in React State: isPerson and isCompany. How to make validation work conditionally, for example if isPerson is true, then person in validationSchema is required to be validated?

STEEL · Answer 1 · 2023-03-20T14:40:09.893

Updated ans: 2023.

you can use Yup conditions

const validationSchema = Yup.object().shape({

      isCompany: Yup.boolean(),
      companyName: Yup.string().when('isCompany', {
        is: true,
        then: Yup.string().required('Field is required')
      }),
      companyAddress: Yup.string().when('isCompany', {
        is: (isCompany) => true,//just an e.g. you can return a function
        then: Yup.string().required('Field is required'),
        otherwise: Yup.string()
      }),
      // test an unconventional type
      logo: Yup.mixed()
       .test('file_size', 'error: file size exceeds!', (files, context) => {
         return filesIsValid(files) ? files[0].size <= 10000 : true
    /** with Input file, target will be a FileList,
    you can handle onChange at your form level
    // [Please note]: Here finally I'm returning `true`,
    // you can use context?.createError() but it will void .isNotReuired() 
    // meaning even if you keep this field optional your form will be still invalid 
    **/
       })
       .test('file_type', 'error msg: file type must match', (files, context) => {// test and return bool or contextError})
    });

And make sure to update your form accordingly. I hope you get the point...

This is a nice standard conditional validation where the conditions are defined between form fields. However, the original question was how to make a similar condition but based on state, i. e. without having `isCompany` in the schema (and the form). — dmudro, Apr 19 '20 at 21:56
just a correction: the param of the function is 'isCompany', not 'companyValue' — deathemperor, Jun 03 '20 at 10:38
When use multiples values, example `is: 1 || 2`, it's not working. — cura, May 13 '21 at 17:44
@cura try doing ```is: isCompany => isCompany === 1 || isCompany === 2``` — Embedded_Mugs, Nov 26 '22 at 23:38

score 30 · Accepted Answer · answered Feb 28 '19 at 05:57

You can conditionally add to your validation schema just like any other object:

let validationShape = {
  company: Yup.object().shape({
    name: Yup.string().required('Field is required'),
    address: Yup.string().required('Field is required'),
    email: Yup.string()
      .email('Wrong e-mail format')
      .required('Field is required')
  })
};

if (this.state.isPerson) {
  validationShape.person = Yup.object().shape({
    name: Yup.string().required('Field is required'),
    surname: Yup.string().required('Field is required'),
    middleName: Yup.string().required('Field is required'),
    email: Yup.string()
      .email('Wrong e-mail format')
      .required('Field is required');
}

const validationSchema = Yup.object().shape(validationShape);

this works but seems a bit bloated – peter flanagan Jan 13 '22 at 08:36 — peter flanagan, Jan 13 '22 at 08:36

score 16 · Answer 3 · edited Jun 11 '23 at 11:53

Conditional validations with YUP :

All kinds of validation that can be done with when are as follows:

1. Single value, simple condition :
RULE: Only ask for personName when isPerson true.

personName : Yup.string().when('isPerson', {
    is: true, 
    then: Yup.string().required('Field is required'),
    otherwise: Yup.string(),
})

// alternatively, using callback
personName : Yup.string().when('isPerson', ([isPerson], schema) => {
    if (isPerson) 
        return Yup.string().required('Field is required');
    return schema;
})

2. Single value, complex condition :
RULE: Only ask for personName when company is "IT".

personName : Yup.string().when('company', {
    is: (company) => company === 'IT', 
    then: Yup.string().required('Field is required'),
    otherwise: Yup.string(),
})

// alternatively, using callback
personName : Yup.string().when('company', ([company], schema) => {
    if (company === 'IT') 
        return Yup.string().required('Field is required');
    return schema;
})

3. Multi value, complex condition :
RULE: Only ask for personName when company is "IT" and person is valid.

personName : Yup.string().when(['company', 'isPerson'], {
    is: (company, isPerson) => company === 'IT' && isPerson, 
    then: Yup.string().required('Field is required'),
    otherwise: Yup.string(),
})

// alternatively, using callback
personName : Yup.string().when(['company', 'isPerson'], ([company, isPerson], schema) => {
    if (company === 'IT' && isPerson) 
        return Yup.string().required('Field is required');
    return schema;
})

This answer should've more upvotes. It covers all the scenarios which one can encounter in the formik conditional validations. — Su So, Apr 17 '23 at 14:47

score 4 · Answer 4 · edited Jan 30 '23 at 14:54

While the accepted solution works, it had one problem - two of the fields to be validated were common, and had to be duplicated. In my case, I had majority of the fields common with just 2-4 outliers.

So here is another solution:

Define each schema separately - i.e. 3 schemas - commonSchema for the common fields, personSchema for person specfic fields & companySchema for company specific fields.

Merge the schemas based on the state

 const validationSchema = isPerson 
                        ? commonSchema.concat(personSchema)
                        : commonSchema.concat(companySchema)

For details on "concat", refer to the yup docs on github.

score 2 · Answer 5 · edited Aug 23 '22 at 12:45

                email: Yup.string()
                    .when(['showEmail', 'anotherField'], {
                        is: (showEmail, anotherField) => {
                            return (showEmail && anotherField);
                        },
                        then: Yup.string().required('Must enter email address')
                    }),

Multiple fields can also be used for validation.

Conditional validation with Yup and Formik

5 Answers5

Conditional validations with YUP :

Linked