Yup conditional validation on different levels

Viewed 131

I am using formik with Yup validation, and I want to perform a validation where the field is at at a different level of the shape.

Here is what I've tried so far, and doesn't seem to work.

const conditional = Yup.object().shape({
  signup: Yup.object().shape({
    callingFor: Yup.string(),
    person: Yup.object().shape({
      firstName: Yup.string()
        .when('callingFor', {
          is: (callingFor) => callingFor !== 'Myself',
          then: Yup.string().required('First Name is required')
        })
    })
  })
})

What I want to happen is that when a user selects Myself from a select input, then I would expect that the first name is required, otherwise it is not.

0 Answers
Related