Validation of dependent fields / compound validations

[gdfreitasdev]

Hi everyone,

I sometimes get into a situation where I need to manually trigger a field validation because its rules was invalided by another field.

I'll give an example:

• Let's consider we have 2 inputs of type number: Height Feet and Height Inches
• The validation in schema is that both fields are initially optional, but once one is filled the other turns required.

For some reason the schema validator is returning the invalid field but it does not propagate/update formState the errors

After some research in the community I realized that it requires manually calling trigger(sideEffectField). That can be done either by having an useEffect in watched current values or by imperatively calling trigger during onChange callbacks.

I tried with both Zod and Joi resolvers, so it doesn't seems to be something related to the resolvers.

const schema = z.
  .object({
    heightFeet: z
      .number()
      .optional(),
    heightInches: z
      .number()
      .optional()
  })
  .superRefine((object, ctx) => {
    if (
      object['heightFeet'] &&
      object['heightFeet'] === undefined
    ) {
      ctx.addIssue({
        path: ['heightFeet'],
        code: z.ZodIssueCode.custom,
        message: 'Height feet is required',
      });
    }

    if (
      object['heightFeet'] &&
      object['heightFeet'] === undefined
    ) {
      ctx.addIssue({
        path: ['heightFeet'],
        code: z.ZodIssueCode.custom,
        message: 'Height inches is required',
      });
    }
  });

  // ...

  const {    
    // ... 
    trigger,
    formState: { errors, isValid }} = useForm({
    mode: 'onChange',
    resolver: zodResolver(schema)
  });

  // Solution #1 (useEffect + watch)
  const heightFeetCurrentValue = watch('heightFeet');
  const heightInchesCurrentValue = watch('heightInches');
  useEffect(() => {
    trigger('heightFeet');
  }, [heightInchesCurrentValue, trigger]);
  useEffect(() => {
    trigger('heightInches');
  }, [heightFeetCurrentValue, trigger]);

  return (
    <>
      <ControlledInputNumber
        name='heightFeet'
        // Solution #2 (setTimeout + trigger)
        onChange={() => setTimeout(() => trigger('heightInches'))}
      />
      <ControlledInputNumber
        name='heightInches'
        // Solution #2 (setTimeout + trigger)
        onChange={() => setTimeout(() => trigger('heightFeet'))}
      />
    </>
  )

How do you approach this situation? I'd say an solution for this will be appreciated in the official docs.