validate a field when another field changes

[aprilmintacpineda]

Hi, I'm trying to implement a feature that disallows a user from selecting the same things on different fields. Now I want the validation to run on multiple fields (A, B). When A changes, I want B to also be validated. Example below:

schema.superRefine((values, ctx) => {
  if (
    values.A === values.B
  ) {
    ctx.addIssue({
      code: z.ZodIssueCode.custom,
      message: 'Please select a different value',
      path: ['A'],
    });

    ctx.addIssue({
      code: z.ZodIssueCode.custom,
      message: 'Please select a different value',
      path: ['B'],
    });
  }
})

This is what happens:

When I set A to a value and then select the same value in B, the error appears in B. When I try to select a different value for A, the error in B still remains (and vice-versa).

What I expect:

When I set A to a value and then select the same value in B, the error appears in B. When I try to select a different value for A, the error in B should go away.

Note:

I use react-hook-form and zodResolver and I have tried the following options but it didn't work:

mode: 'all',
reValidateMode: 'onChange',
criteriaMode: 'all',

[dosubot[bot]]

I'm a bot trained on Zod's codebase & issues.

Zod recalculates all validation errors from scratch every time you call .parse or .safeParse on your schema—errors don't persist unless the data still violates your validation rules. Your .superRefine() logic is correct for cross-field validation: if A === B, issues are added to both fields. If you change either field so they are no longer equal, Zod will not include those errors in the next validation result.

If you're seeing errors remain after changing a field, it's almost certainly due to how your form library (like React Hook Form or Formik) manages validation and error state. Many form libraries only re-validate the field that changed, not the whole form, so errors for related fields may not be cleared automatically. To fix this, ensure your form triggers validation for the entire object/schema whenever either field changes. This way, Zod will re-validate both fields and clear any errors that no longer apply.

For more on how Zod handles errors and cross-field validation, see the docs on superRefine and error formatting. Also, note that in Zod 4, .superRefine() is deprecated in favor of .check(), but the cross-field validation logic is the same (PR #4954).

If this solves your issue, feel free to close the thread! If you need integration tips for a specific form library, let me know which one you're using.

To reply, just mention @dosu.

---

^{How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other}    

[aprilmintacpineda]

@dosu I forgot to mention that I also use react-hook-form and zodResolver

[dosubot[bot]]

React Hook Form only re-validates the field that changed by default, so cross-field errors (like your A/B scenario) may not clear automatically. To fix this, use a useEffect hook to watch changes on one field and trigger validation on the other. For example:

useEffect(() => {
  const sub = watch((_, { name }) => {
    if (name === 'A') trigger('B');
    if (name === 'B') trigger('A');
  });
  return () => sub.unsubscribe();
}, [watch, trigger]);

This ensures that when either A or B changes, both fields are re-validated and errors are cleared as expected. This approach is recommended in the React Hook Form + Zod community—see this GitHub issue for more details.

This works with both Zod 3 and Zod 4. If you want advice on .superRefine vs .check, let me know your Zod version. If this solves your issue, feel free to close the thread!

To reply, just mention @dosu.

---

^{How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other}