question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Validate nested dependent fields

See original GitHub issue

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!

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Reactions:1
  • Comments:6 (1 by maintainers)

github_iconTop GitHub Comments

3reactions
jquensecommented, Sep 10, 2020

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

0reactions
jmegmancommented, Jun 9, 2022

If you use Schema.test you provide a your own validation function as the third argument, which accepts the current field ‘value’ and ‘ctx’ which has a ‘from’ property which is an array where I found the schema for the whole of my form validation, for example…

group3: yup.object().shape({
item5: yup.string().test('test-name', 'my error message', (value, ctx) => {
          console.log(ctx)
// so you could access something like ctx.from[1].value.group1.item1 here
          return // your test on ctx values here to return boolean, where false is test fail
        }))

However, it didn’t feel right to me as the ctx.from array isn’t documented as far as I can see so I can’t be sure that if I were to use values in ctx.from[1] for instance that they wouldn’t change if I changed my form schema in future.

I’m using formik within React so was able to do an additional field validation directly on the formik Field component instead, which felt safer to me.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Validation Rules, Dependent Fields, and Nested IFs, ANDs ...
The Solution · Check if any of the relevant fields are filled out (IF, NOT, ISBLANK) · If they are, check if the...
Read more >
Validate data within nested structures - Flowfinity
Flowfinity lets you use nested fields for items that should to be grouped together such as lists. Learn how to validate data in...
Read more >
Conditional Validation for nested object with parent condition
As above, I want class B has a validation with the condition: A.Status = 'Active' then class B has [Required] x, otherwise b_instance.x...
Read more >
Nested Objects and Arrays - VeeValidate
vee-validate supports nested objects and arrays by using field name syntax to indicate a field's path. This allows you to structure forms easily...
Read more >
Validating arrays and nested values in Laravel - LogRocket Blog
Let's say that I want to make my inventory software a bit more complicated by having an item field with two nested fields:...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found