Re-run validations after changing the validationSchema

[declanelcocks]

Let me first explain my use case:

• Form populated by initialValues
• Helper function that tracks the diff between initialValues and values (basically the values that have changed)
• There's a field that is required only if a specific field has been changed from its initial value

Here's my schema for that specific field, let's call it requiredField:

const generateSchema = (diff: Values) => {
  Yup.string()
    .test({
      name: 'name',
      message: 'message',
      test: (value) => (diff?.fieldName ? !!value : true),
    })

  // other stuff

  return schema
}

Basically if diff.fieldName exists (i.e. fieldName has been changed) then I want to make it required (!!value). When the diff changes I update the validationSchema and can see with some logs that diff/schema is working as expected. Here's what actually happens:

• Update fieldName, diff updated, schema regenerated, no errors in the form
• Submit form or change another field (cause an update), error appears for requiredField

What I would like to happen is for the form to be validated after validationSchema changes, to show the error as soon as fieldName has been changed.

Solution

Is this possible as-is? I've tried a combination of enableReinitialize, validateOnChange and validateOnMount but no luck. The only way I've managed to get this behaviour is by doing this:

useEffect(() => {
    setTimeout(() => {
      void validateForm();
    })
  }, [schema])

Seems like a major hack 😥 Thanks for any suggestions!

[fastndead]

You don't need a new schema on values changed, as far as I can see a single one schema can account on what you're trying to do.

Now why the schema isn't validated without useEffect hack and explicit call for validation is a good question, for that minimal reproduction would be greatly appreciated.

also as a side note i think you could use .when() method in your schema for your use case

[declanelcocks]

@fastndead I think what you suggested would work if the diff in my example was actually part of the schema? In this case, it's an object passed in when generating the schema, which can change between renders. I'm not sure how it would work with a simple .when as you suggested 🤔

[fastndead]

@declanelcocks maybe not .when, but you could modify .test() call to accomodate to your use case without having to reconstruct a new schema every time. For example something like this:

.test({
      name: 'name',
      message: 'message',
      test: (value, testContext) => (testContext.parent.fieldName !== initialValues.fieldName ? Boolean(value) : true),
    })

[declanelcocks]

@fastndead from what I can tell, testContext is useful for exposing yup specific values but not anything outside of yup? I'm not seeing how that would work for the diff value?