[Feature]: Better dependent field validation UX & DX

[airjp73]

What is the new or updated feature that you are suggesting?

Based off of #172.

When the validity of a field depends on the value of another field, the behavior of the validation isn't quite right.

The example by @jnicklas is this:

yup.object().shape({
  foo: yup.boolean(),
  bar: yup.string().when('foo', { is: true, then: (s) => s.required() }),
});

If the field bar has an error and the user unchecks the checkbox foo, then the error on bar doesn't go away.

Possible solution

The current solution I have in mind is something like this:

• Validate the entire form whenever validate is called
• Clear any errors that are no longer present
• When adding errors validation, look at the touched state and validationBehavior config for each field and use that information to determine if an error should be present.

This would constitute a breaking change, so we would make this change for v5.

I still want to do some thinking about this change before moving ahead with it, though. I've been tossing around other ideas for potential API changes for v5 that might change this idea as well.

Why should this feature be included?

Currently, to get the desired behavior, the user must manually call validate for the dependent field. Any other modern form library like Formik or react-hook-form would handle this behavior automatically.

[andreasrs]

I just got bit by this one. Maybe add this to the FAQ in README until it is supported, it may help some library users save a bit of time.

Would you accept a PR to improve on this ?

[airjp73]

@andreasrs, I would definitely accept a PR for this (a docs PR or the fix itself). Happy to provide guidance if you wanted to pick it up.

[airjp73]

v5 needs to happen soonish to address #261, so I'm hoping to get this addressed soon.

[airjp73]

Fixed in 00f69b8191ddfebf10bb6c69e92f1baf2ee0cf3e, hoping to release sometime this week.