GoldStrikeArch Posts - Answer Overflow

GoldStrikeArch

Explore posts from servers

•Created by GoldStrikeArch on 11/3/2023 in #questions

Zod validation with react-hook-form

Is there a way to validate form field for multiple errors simultaneosly? My use case is password strength indicator where I need to validate password for 3 validation criteria (length, contains digit, contains special symbol) at the same time. I am using zod and my schema is like this:

import { z } from "zod";

export const schema = z
  .object({
    old_password: z.string().min(1, { message: "Required" }),
    new_password: z
      .string()
      .min(8, { message: "Min 8 characters" })
      .regex(/[0-9]/g, { message: "Need a digit" })
      .regex(/[!,@,#,$,%,^,&,*]/g, {
        message: "Need a special character !@#$%^&*",
      }),
    confirm_new_password: z.string(),
  })
  .refine((data) => data.confirm_new_password === data.new_password, {
    message: "Should be equal to new password",
    path: ["confirm_new_password"],
  });
export type Schema = z.infer<typeof schema>;

import { z } from "zod";

export const schema = z
  .object({
    old_password: z.string().min(1, { message: "Required" }),
    new_password: z
      .string()
      .min(8, { message: "Min 8 characters" })
      .regex(/[0-9]/g, { message: "Need a digit" })
      .regex(/[!,@,#,$,%,^,&,*]/g, {
        message: "Need a special character !@#$%^&*",
      }),
    confirm_new_password: z.string(),
  })
  .refine((data) => data.confirm_new_password === data.new_password, {
    message: "Should be equal to new password",
    path: ["confirm_new_password"],
  });
export type Schema = z.infer<typeof schema>;

But the problem is that I am only getting 1 error at a time (in react-hook-forms form.formState.errors) as I defined above. I tried to use z.union and even z.superRefine but to no avail.

12 replies

Gaming

Programming