Build forms that validate

Step by step

1. 1

   Write one schema as the source of truth

   Define a Zod schema describing every field and rule (email format, min length, required), then infer your form's TypeScript type from it with z.infer. This one object drives your types, your client validation, and your server validation — nothing gets duplicated.

2. 2

   Wire the form with React Hook Form + zodResolver

   Pass your schema to useForm via zodResolver so the form validates against it automatically. Register each input and pull errors out of formState — you get typed values and per-field error messages for free, no manual state juggling.

3. 3

   Render errors accessibly

   Tie each label to its input with htmlFor/id, set aria-invalid when a field has an error, point aria-describedby at the error element, and give the error node role="alert" so screen readers announce it. Add noValidate to the form so your messages win over the browser's default popups.

4. 4

   Pick a sensible validation timing

   Set React Hook Form's mode to 'onTouched' or 'onBlur' so you don't scream at users on the first keystroke, then it re-validates on change once a field has an error. Disable the submit button while isSubmitting is true to prevent double submits.

5. 5

   Re-validate on the server with the SAME schema

   In your Server Action or API route, run schema.safeParse(body) on the incoming data before doing anything. If it fails, return the field errors; if it passes, you have clean, typed data. This is the line of defense that actually protects your database — the client check is just for feel.

6. 6

   Map server errors back onto the form

   For failures the client can't know about (email already taken, coupon expired), return structured field errors from the server and use setError to attach them to the right input. The user sees the message next to the field, not a generic toast.

"use client";
import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { z } from "zod";

// One schema — reuse this exact object on the server too.
const schema = z.object({
  email: z.email("Enter a valid email"),
  password: z.string().min(8, "At least 8 characters"),
});
type FormValues = z.infer<typeof schema>;

export function SignupForm() {
  const { register, handleSubmit, formState: { errors, isSubmitting } } =
    useForm<FormValues>({ resolver: zodResolver(schema), mode: "onTouched" });

  async function onSubmit(values: FormValues) {
    await fetch("/api/signup", { method: "POST", body: JSON.stringify(values) });
  }

  return (
    <form onSubmit={handleSubmit(onSubmit)} noValidate>
      <label htmlFor="email">Email</label>
      <input id="email" type="email" aria-invalid={!!errors.email}
        aria-describedby="email-error" {...register("email")} />
      {errors.email && <p id="email-error" role="alert">{errors.email.message}</p>}

      <button type="submit" disabled={isSubmitting}>Create account</button>
    </form>
  );
}