Set error for multiple inputs with react-hook-form and zod

[kendall-wahnschaffe]

All I want to do is surface the same error to multiple inputs (so both inputs now have the "Emails do not match" text beneath and go away once the fields are valid. Is this possible?

const schema = z
  .object({
    email: z.string().email(),
    confirmEmail: z.string().email()
  })
  .refine((schema) => schema.email === schema.confirmEmail, {
    message: "Emails do not match",
    path: ["confirmEmail"]
  })

const App = () => {
  const {
    register,
    handleSubmit,
    formState: { errors }
  } = useForm({
    mode: "onTouched",
    resolver: zodResolver(schema)
  });

  return (
    <form onSubmit={handleSubmit((d) => console.log(d))}>
      <input {...register("email")} type="email" />
      {errors?.email && <p>{errors.email.message} </p>}
      <input {...register("confirmEmail")} type="email" />
      {errors?.confirmEmail && <p>{errors.confirmEmail.message} </p>}
      <input type="submit" />
    </form>
  );
};

https://codesandbox.io/s/react-hook-form-zod-resolver-example-forked-60l55y?file=/src/App.js:176-933

[kendall-wahnschaffe]

Pure Zod

If I nest refines I know zod tracks the errors, and this appears to fix the problem. But the next problem is that it only revalidates the fields when they're specifically being interacted with.

const schema = z
  .object({
    email: z.string().email(),
    confirmEmail: z.string().email()
  })
  .refine((schema) => schema.email === schema.confirmEmail, {
    message: "Emails do not match",
    path: ["confirmEmail"]
  })
  .refine((schema) => schema.email === schema.confirmEmail, {
    message: "Emails do not match",
    path: ["email"]
  })
  
console.log(
  x.safeParse({
    email: 'a@a.com',
    confirmEmail: 'z@z.com'
  })
  .error.format() 
)

[leapful]

@kendall-wahnschaffe

You can use mode: 'onChange' on useForm hook and deps option of register method to achieve the behavior.

Working demo: https://codesandbox.io/s/react-hook-form-zod-resolver-example-forked-7dqt96?file=/src/App.js

[kendall-wahnschaffe]

both inputs now have the "Emails do not match" text beneath

This doesn't work as expected. Also changing the form mode is not an option. Let me whip up a demo of the behavior I'd like out of the box.

[kendall-wahnschaffe]

This gets us closer: https://codesandbox.io/s/react-hook-form-zod-resolver-example-forked-06h975?file=/src/App.js

The error text is visible underneath both inputs, but the dependencies are too tightly coupled. It shouldn't render the error text for the other input so quickly

[kendall-wahnschaffe]

Okay I think I got it https://codesandbox.io/s/amazing-wind-yfdk06?file=/src/App.js