Yup: Validate nested dependent fields

[maverickVision]

Hi, Im trying to create a multi tab form with yup and formik, but I couldn't figure out how to create the validation schema properly. Here is a sample os the schema I've create so far:

const validationSchema = yup.object().shape({
  group1: yup.object().shape(
    {
      // Item1 will be required only if item2 is already filled
      item1: yup.string().when('item2', {
        is: (value) => value !== '',
        then: yup.string().required('This field is required')
      }),
      // Item2 will be required only if item1 is already filled
      item2: yup.string().when('item1', {
        is: (value) => value !== '',
        then: yup.string().required('This field is required')
      })
    }
  ),
  group2: yup.object().shape({
    item3: yup.string().required('This field is required'),
    item4: yup.string().nullable()
  }),
  group3: yup.object().shape({
    // Item 5 will be required if group2.item4 is selected with the option "option1"
    item5: yup
      .string()
      .when('group2.item4', {
        is: 'option1',
        then: yup.string().required('This field is required')
      })
  })
})

As you can see, I will have groups of fields (every tab is a group). On the first group, I need to make item1 required if the item2 is filled, or make the item2 required if the item1 is filled (if none of them is filled they should not be required). And on group3, the item5 will only be required if the group2.item4 is selected, and the option selected is option1, otherwise, it shouldn't be required.

I'm really having a hard time figuring this out, because all the examples that I found are basic examples. Appreciate any help!

[jquense]

at the moment you can only define conditions between siblings or sibling children, you can "go up" the chain, so group1's items can be dependent on each other, but group3.item5 can't be related to group2.item4.

For something like this it's best to put the validation logic on the common parent

[maverickVision]

I ended up refactoring my schema structure to work like you said. Thanks for your help!

[joeynguyen]

@maverickVision can you explain how you changed your schema to accomplish this behavior? I'm trying to implement the same thing. thanks!

[joeynguyen]

Nevermind, I figured it out. At some point, I'll try to document it or create a demo repo for others to look at who look at this issue.

[maverickVision]

@maverickVision can you explain how you changed your schema to accomplish this behavior? I'm trying to implement the same thing. thanks!

Hey, sorry for the late reaponse. I actually never made it work, I gave up and refactored all my validation into one big object.