1 year ago

#331223

test-img

Kayote

React-hook-form validation - IsValid prop keeps returning false

I have a fairly complex form using React-Hook-Form. I am unable to get the validation to work correctly.

The zod library validation schema is as such:

// For the form to be valid, 
// Atleast 2 goal forms, with min. 1 task
export const schemaZod = z.object({
  goals: z
    .object({
      title: z.string().min(3, { message: "required" }).max(40),
      intro: z.string().max(250).optional(),
      deadline: (z.string() || z.date()).optional(),
      task: z
        .object({
          content: z.string().min(3, { message: "required" }).max(50),
          dayFrequency: z.number().min(0).max(5).optional(),
          weekFrequency: z.number().min(0).max(7).optional(),
        })
        .array()
        .min(1),
    })
    .array()
    .min(2),
});

  const ctx = useForm({
    mode: "onChange",
    resolver: zodResolver(schemaZod),
  });

Here is a working CodeSandBox example, sincere apologies for so much code. Its a complex form & I am unable to get the validation formState.isValid to be true, even when the conditions are met.

javascript

reactjs

validation

react-hook-form

zod

0 Answers

Your Answer

Accepted video resources