Zod Validation doesn't work with auto form.
Blaise1030 opened this issue · comments
I have added zod validation based on the docs but the form submits even if the fields are empty.
import z from "zod";
export const AuthSchema = z.object({
email: z.string(),
password: z.string(),
});
export type AuthForm = z.infer<typeof AuthSchema>;
const [authForm, { Form, Field }] = createForm<AuthForm>({
validate: zodForm(AuthSchema),
});
const handleSubmit: SubmitHandler<AuthForm> = async (item) =>
await onSubmit(item);
An empty field will return an empty string. Therefore, your form will always conform to your schema. Here is a fix:
const AuthSchema = v.object({
email: v.string()
.min(1, 'Please enter your email.')
.email('The email address is badly formatted.'),
password: v.string()
.min(1, 'Please enter your password.')
.min(8, 'Your password must have 8 characters or more.'),
});
An empty field will return an empty string. Therefore, your form will always conform to your schema. Here is a fix:
const AuthSchema = v.object({ email: v.string() .min(1, 'Please enter your email.') .email('The email address is badly formatted.'), password: v.string() .min(1, 'Please enter your password.') .min(8, 'Your password must have 8 characters or more.'), });
I see, this seems different from how Zod works with react hook forms. Thanks for the feedback