React Form Validation — Working Code (React Hook Form + Zod)

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

const schema = z.object({
  name: z.string().min(2, "Name must be at least 2 characters"),
  email: z.string().email("Invalid email"),
  password: z.string().min(8, "Password must be at least 8 characters"),
  password_confirm: z.string(),
}).refine((d) => d.password === d.password_confirm, {
  message: "Passwords don't match",
  path: ["password_confirm"],
});

type FormData = z.infer<typeof schema>;

export default function ContactForm() {
  const {
    register,
    handleSubmit,
    formState: { errors, isSubmitting },
    reset,
  } = useForm<FormData>({ resolver: zodResolver(schema) });

  async function onSubmit(data: FormData) {
    const fd = new FormData();
    fd.append("access_key", "YOUR_ACCESS_KEY");
    Object.entries(data).forEach(([k, v]) => fd.append(k, String(v)));

    const res = await fetch("https://splitforms.com/api/submit", {
      method: "POST",
      body: fd,
    });
    if ((await res.json()).success) reset();
  }

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register("name")} placeholder="Name" />
      {errors.name && <p>{errors.name.message}</p>}

      <input {...register("email")} type="email" placeholder="Email" />
      {errors.email && <p>{errors.email.message}</p>}

      <input {...register("password")} type="password" placeholder="Password" />
      {errors.password && <p>{errors.password.message}</p>}

      <input {...register("password_confirm")} type="password" placeholder="Confirm password" />
      {errors.password_confirm && <p>{errors.password_confirm.message}</p>}

      <button type="submit" disabled={isSubmitting}>
        {isSubmitting ? "Sending…" : "Send"}
      </button>
    </form>
  );
}

The modern React form validation stack is React Hook Form (state + form mechanics) plus Zod (typed schemas + validation rules). The combination gives you type-safe form data, inline error rendering, async submission, and minimal re-renders — all in ~20 lines per form.

Define your validation rules as a Zod schema. Each field gets a type and constraints — `z.string().min(2)`, `z.string().email()`, `z.number().int().positive()`. The `.refine()` method handles cross-field rules like password confirmation. The schema is the single source of truth for both validation logic and TypeScript types via `z.infer<typeof schema>`.

React Hook Form's `useForm` hook gives you `register` (wires inputs into the form state), `handleSubmit` (runs validation, calls your submit function), and `formState.errors` (the validation errors object). Pass `resolver: zodResolver(schema)` to wire Zod in. That's the whole integration.

Submit handler is a regular async function that receives the validated, typed `data` object. Make a fetch call to splitforms's `/api/submit` endpoint, await the response, update UI accordingly. The `isSubmitting` boolean from formState handles the disable-during-submit pattern automatically.

20 lines per form, fully typed, ~25KB total runtime.