| name | form-zod-validation |
| description | null |
Zod Validation
Category: form · Status: 🟢 Active
When to use
Khi validate form bằng zod schema kết hợp React Hook Form qua zodResolver.
Steps
- Định nghĩa schema zod với message rõ ràng cho từng rule.
- Infer type từ schema bằng
z.infer để dùng làm FormValues.
- Gắn
zodResolver(schema) vào useForm.
- Dùng
.refine/.superRefine cho rule liên field (vd confirm password).
- Tái dùng schema cho cả client form và server action.
Template
const schema = z.object({
email: z.string().email('Email không hợp lệ'),
password: z.string().min(8, 'Tối thiểu 8 ký tự'),
confirm: z.string(),
}).refine((d) => d.password === d.confirm, {
message: 'Mật khẩu không khớp', path: ['confirm'],
});
type FormValues = z.infer<typeof schema>;
useForm<FormValues>({ resolver: zodResolver(schema) });
Example
Good: infer type từ schema, refine cho cross-field, message tiếng Việt.
Avoid: Khai báo type tách rời schema (lệch nhau), validate thủ công lặp lại.
Checklist