Conditional validation with Yup and Formik

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…

Leave a Comment

Hata!: SQLSTATE[HY000] [1045] Access denied for user 'divattrend_liink'@'localhost' (using password: YES)