Form Validation & Error Handling Skill

Stack: React Hook Form + Zod

const schema = z.object({
  email: z.string().email('Enter a valid email'),
  password: z.string().min(8, 'At least 8 characters'),
});
type FormValues = z.infer<typeof schema>;

const form = useForm<FormValues>({ resolver: zodResolver(schema), mode: 'onBlur' });

• Define the schema once, use it for both client-side validation and server-side validation (Server Action re-parses the same schema) — never trust client validation alone; the server is the source of truth.
• mode: 'onBlur' (validate on blur, not on every keystroke) for a less naggy UX; re-validate on change only after the first error on that field.