How to access Zod's general form refine errors from form state in a type-safe manner

[bennettdams]

I'm using general refine errors in my schema, but I don't know how to access them in a type-safe manner.

I have a simple schema that I want to use to update a user.
The user can either
a) input a new username
b) input a new password
c) input a new username & a new password

This means that username and password are both optional, hence the partial.
That's why I additionally have refine to check whether either a new username or a new password has been given as input,
because I don't want to submit if both are empty.

const generalErrorKey = "general";

const userUpdateSchema= z
  .object({
    username: z.string().min(2).max(50),
    password: z.string().min(10).max(50),
  })
  .partial()
  .refine((data) => !!data.username || !!data.password, {
    path: [generalErrorKey],
    message: "Either username or password should be filled in.",
  });

type UserUpdate = z.infer<typeof userUpdateSchema>;

As you can see, the refine error is not used specifically for username or password, it's rather a general "form" error. I created a new key general for that.

Now, when I want to access this error, Zod does not know it:

Property 'general' does not exist on type '{ username?: FieldError | undefined; password?: FieldError | undefined; }'.ts(2339)

  const {
    register,
    handleSubmit,
    formState: {
      errors: {
        username: usernameError,
        password: passwordError,
        // Property 'general' does not exist on type '{ username?: FieldError | undefined; password?: FieldError | undefined; }'.ts(2339)
        [generalErrorKey]: generalError,
      },
    },
  } = useForm<UserUpdate>({
    mode: "all",
    resolver: zodResolver(userUpdateSchema),
  });

This works at runtime, the refine errors are added correctly, but TypeScript is mad at me.

---

Can I somehow while creating the schema let Zod know how my custom error field is called, without a custom ZodErrorMap?

Or is there maybe an easier way to handle these general errors altogether?

[ryerrappa]

Hello, I'm facing the same issue, did you find any solution to this?

[bennettdams]

Hey, unfortunately not. I had to use a @ts-expect-error comment. I think this is not that bad, because of the constant error key (const generalErrorKey = "general"), which I use at schema creation and also schema usage, so the access at runtime is safe - it's just not nice to have a wrong type.

 const {
    register,
    ...
    formState: {
      ...
      errors: {
        username: usernameError,
        password: passwordError,
        // @ts-expect-error This error was added via Zod, but RHF's type is not aware of it.
        [generalFormErrorKey]: generalErrorRaw,
      },
    },
  } = useForm<UserUpdate>({
    ...
  });

[ryerrappa]

Thanks for the heads up! I will probably go down the same route. But I'll let you know if I happen to stumble across any other solution.

[cassostation4]

It have been 3 years, i haven't found any solution for this. Sadge.

[AmphibianDev]

I found the answer!

export default function Page() {
  const form = useForm<LogInSchema>({
    resolver: zodResolver($LogInSchema),
  });
...

To:

type FormData = {
  general?: string;
} & LogInSchema;

export default function Page() {
  const form = useForm<FormData>({
    resolver: zodResolver($LogInSchema),
  });

And now you can unwrap the form and use the errors.general:

const {
  handleSubmit,
  control,
  formState: { isSubmitting, errors },
} = form;

{errors.general && <p className="text-red-500">{errors.general.message}</p>}

[arrdix]

It actually works!
You don't deserve that one dislike pal.

Anyway thanks, you saved my life.

[melodyxlee]

type FormData = {
  general?: string;
} & z.infer<typeof LogInSchema>;

Thanks! Had to add z.infer but this worked for me!

[hadson172]

Unfortunately, it does not work anynore.

[buraev]

i have the same problem

[hocino]

Hi,

I use this solution to display global error message :

const formSchema = z.object({
 tagId: z.string().optional(),
 value: z.string()
   .max(15, { message: t("common_error_max", { length: "15" }) }))
   .optional(),
 confirmTag: z.string().optional()
    })
 .refine(schema => schema.value !== '' || schema.tagId !== '', {
   message: t("customTags_selectAnExistingTagOrCreateANewOne"), 
   path: ["confirmTag"]
   });

First, I create an optional field (confirmTag in the previous code) just to display the global error and I link my global validation to this link with the path parameter.

Finally, I create a FormField based on the field confirmTag just to display global error (I use Shadcn/UI but we can follow the same logic just with react-hook-form)

<FormField
    control={form.control}
    name="confirmTag"
    render={({ field }) => (
    <FormItem className="mt-4">
       <FormMessage />
    </FormItem>
     )}
/>

I used this post to find this solution. I don't know if it's the best way to do that but it works good, it's fast to do and robust.

[Threynaud]

I also have this problem. @hocino's solution works (thank you for sharing) but it's more a workaround that a real solution to the issue.

[florianmartens]

I'm trying to use this with zod4 and the general .check method but nothing has worked so far. I'm just generally unable to have the error show up in the form state.