how to validate only a part of zod schema?

[Flaain]

Hello, i have a multi step form and for validate using zod. I want to disable my "next" button if form is invalid. I know useForm have "isValid" but this property looks through the whole schema. So let's say on first step i have this:

<FormField
    name="email"
    control={form.control}
    render={({ field }) => (
        <FormItem className="relative">
            <FormLabel className="text-slate-400">Email</FormLabel>
            <FormControl>
                <Input {...field} placeholder="Enter your email address" className="dark:bg-slate-500 bg-slate-800 border-none text-white" />
            </FormControl>
            <FormMessage />
        </FormItem>
    )}
/>

and this is my schema:

export const signupSchema = z
    .strictObject({
        email: z.string().email("Invalid email address"),
        name: z.string().trim().min(3, "Name must be at least 3 characters long"),
        password: z.string().trim().min(6, "Password must be at least 6 characters long"),
        confirmPassword: z.string().trim().min(6, "Password must be at least 6 characters long"),
    })
    .refine((data) => data.password === data.confirmPassword, {
        message: "Passwords do not match",
        path: ["confirmPassword"],
    });

If i use for button disable={!isValid} it's not gonna work cuz like a mentioned before it gonna looks through the whole schema

    const form = useForm<z.infer<typeof signupSchema>>({
        resolver: zodResolver(signupSchema),
        defaultValues: {
            email: "",
            password: "",
            confirmPassword: "",
            name: "",
        },
        mode: "all",
    });

Any ideas?

[sujinleeme]

I discovered a quite similar question and its solution here

Schema
The schema variable holds an array of validation rules for each step of the form. Each step in the form has its own set of validation rules defined using zod's object function.

const validationSchema = [
  z.object({
    name: z.string().trim().min(3, "Name must be at least 3 characters long"),
  }),
  z.object({
    email: z.string().email("Invalid email address"),
  }),
  z.object({
    password: z
      .string()
      .trim()
      .min(6, "Password must be at least 6 characters long"),
    confirmPassword: z
      .string()
      .trim()
      .min(6, "Password must be at least 6 characters long"),
  }),
];

Form Component
Inside the component that manages the multi-step form, you can create a state to keep track of the active step (activeStep).
The currentValidationSchema variable selects the validation rules for the current active step.

export const MultiStepForm = () => {
  const [activeStep, setActiveStep] = useState(0);

  const currentValidationSchema = validationSchema[activeStep];

  const methods = useForm({
    defaultValues,
    resolver: zodResolver(currentValidationSchema),
    mode: "all",
  });

Next / Prev button
We can revalidate the form by resetting it with the current values. When a user inputs name and clicks next button, a user comes back to the first step, the next button is active because of isValid.

 const handleBack = () => {
    setActiveStep((prevActiveStep) => prevActiveStep - 1);
    reset({ ...getValues() }); 
  };

Here's the codesandbox.

[Flaain]

Hi Sujin, thank you very much for your suggestion, but unfortunately it works somehow weird. I attached a short video about what I mean.

https://imgur.com/a/pNkR6VA

i also tried to remove isDirty and just disable when is !isValid but it works the same

[Flaain]

P.S. I found a solution and it works great:

const steps: Array<{ fields: Array<FieldPath<z.infer<typeof signupSchema>>> }> = [
    { fields: ["email", "password", "confirmPassword", "birthDate"] },
    { fields: ["name"] },
];

const checkNextAvailability = () => {
    // eslint-disable-next-line @typescript-eslint/no-unused-vars
    const { name, ...restErrors } = form.formState.errors;

    const validateActions = {
        0: !!Object.keys(restErrors).length || !form.getValues(steps[step].fields).some(Boolean),
        1: !form.formState.isValid,
    };

    return  form.formState.isSubmitting || validateActions[step as keyof typeof validateActions] || loading
};
    
// hook return --> return { //another properties, isNextButtonDisabled: checkNextAvailability(), }
    
<Button type='button' onClick={onNext} className='w-24' disabled={isNextButtonDisabled}>
    {isLastStep ? "Submit" : "Next"}
</Button>

but unfortunately now I have another error. And it's really frustrating ;d ( https://github.com/orgs/react-hook-form/discussions/11741 )

[sujinleeme]

Hi, @Flaain
Thanks for sharing this. We could reset values to trigger validation. Can you revisit this codesandbox and check again?

  const handleNext = () => {
    setActiveStep((prevActiveStep) => prevActiveStep + 1);
    reset({ ...getValues() });  // here
  };

[Flaain]

YES, YES, YES!!! Thank you so much this also somehow solve ( https://github.com/orgs/react-hook-form/discussions/11741 ) this problem! I was struggle with this 3 days :D Thank you!

[john093e]

As well !!! I had the error : Cannot update a component (X) while rendering a different component (Controller).

reseting the form data before conditionally adding the new field on the DOM as resolve it
form.reset({ ...form.getValues() })

Many thanks !