How to make zod refine + react-hook-form errors update onChange

[truong120201]

thank for your help.

I'm using react-hook-form and zod to validate fields
For example I have 2 fields

which I want if field title has value is 28 then field body is required

import { z } from "zod";

export const createPostSchema = z
  .object({
    title: z.string().min(1, { message: "Title is required" }),
    body: z.string().optional(),
  })
  .refine(({ title, body }) => title != "28" || (title === "28" && !!body), {
    message: "Body is required",
    path: ["body"],
  });

export type CreatePostSchema = z.infer<typeof createPostSchema>;

"use client";

import { zodResolver } from "@hookform/resolvers/zod";
import { useForm } from "react-hook-form";
import { CreatePostSchema, createPostSchema } from "./create-post.zod-schema";

export default function CreatePostClient() {
  const methods = useForm<CreatePostSchema>({
    resolver: zodResolver(createPostSchema),
    mode: "onChange",
  });
  const {
    register,
    handleSubmit,
    formState: { errors },
  } = methods;
  const onSubmit = (data: CreatePostSchema) => {
    console.log(data);
  };
  return (
    <div>
      <h1>Create Post</h1>
      <form
        onSubmit={handleSubmit(onSubmit)}
      >
        <p>title</p>
        <input type="text" {...register("title")} />
        {errors.title && <span>{errors.title.message}</span>}
        <p>body</p>
        <input type="text" {...register("body")} />
        {errors.body && <span>{errors.body.message}</span>}
        <button type="submit">Submit</button>
      </form>
    </div>
  );
}

in this case I can validate the fields, but I got problem when I follow these steps

1. fill 28 to title

2. hit submit

3. => errors show at body (required) // <- correct till this step
   

4. but when I change title to 29, the errors from body still appear (errors from formState still has value for body), it only disappear after I hit submit (I want it disappear when I change title value)