how to validate only a part of zod schema? #11722
-
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:
and this is my schema:
If i use for button disable={!isValid} it's not gonna work cuz like a mentioned before it gonna looks through the whole schema
Any ideas? |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment 6 replies
-
I discovered a quite similar question and its solution here Schema 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 export const MultiStepForm = () => {
const [activeStep, setActiveStep] = useState(0);
const currentValidationSchema = validationSchema[activeStep];
const methods = useForm({
defaultValues,
resolver: zodResolver(currentValidationSchema),
mode: "all",
}); Next / Prev button const handleBack = () => {
setActiveStep((prevActiveStep) => prevActiveStep - 1);
reset({ ...getValues() });
}; Here's the codesandbox. |
Beta Was this translation helpful? Give feedback.
Hi, @Flaain
Thanks for sharing this. We could reset values to trigger validation. Can you revisit this codesandbox and check again?