Validate nested dependent fields
See original GitHub issueHi, 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:
- Created 3 years ago
- Reactions:1
- Comments:6 (1 by maintainers)
Top 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 >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
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
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…
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.