Form Validation at Scale

import { useActionState } from "react";
import { createRoot } from "react-dom/client";

function validate(values) {
  const errors = {};
  if (values.name.trim().length < 3) errors.name = "Enter at least 3 letters.";
  if (!/^\S+@\S+\.\S+$/.test(values.email)) errors.email = "Enter a valid email address.";
  if (!/^[6-9]\d{9}$/.test(values.phone)) errors.phone = "Enter a 10-digit mobile number.";
  return errors;
}

async function register(previous, formData) {
  const values = Object.fromEntries(formData); // { name, email, phone } as strings
  const errors = validate(values);
  if (Object.keys(errors).length > 0) {
    console.log(`Rejected: ${Object.keys(errors).join(", ")}`);
    return { errors, values }; // send the values back so the inputs keep them
  }
  console.log(`Registered ${values.name}`);
  return { errors: {}, values: { name: "", email: "", phone: "" }, done: `Welcome, ${values.name}!` };
}

const empty = { errors: {}, values: { name: "", email: "", phone: "" } };

function Input({ label, name, state, ...rest }) {
  const error = state.errors[name];
  return (
    <p>
      <label>
        {label}{" "}
        <input name={name} defaultValue={state.values[name]} aria-invalid={error ? true : undefined} {...rest} />
      </label>
      {error && <small style={{ color: "#b91c1c" }}> {error}</small>}
    </p>
  );
}

function RegisterForm() {
  const [state, formAction, isPending] = useActionState(register, empty);
  return (
    <form action={formAction} noValidate>
      <Input label="Name" name="name" state={state} />
      <Input label="Email" name="email" type="email" state={state} />
      <Input label="Mobile" name="phone" inputMode="numeric" state={state} />
      <button disabled={isPending}>Register</button>
      {state.done && <p style={{ color: "green" }}>{state.done}</p>}
    </form>
  );
}

createRoot(document.getElementById("root")).render(<RegisterForm />);

import { useState } from "react";
import { createRoot } from "react-dom/client";

const rules = {
  pincode: (v) => (/^[1-9]\d{5}$/.test(v) ? "" : "PIN code must be 6 digits and not start with 0."),
  city: (v) => (v.trim() ? "" : "City is required."),
};

function AddressForm() {
  const [values, setValues] = useState({ pincode: "", city: "" });
  const [touched, setTouched] = useState({});

  const errors = Object.fromEntries(Object.entries(rules).map(([field, check]) => [field, check(values[field])]));
  const visibleError = (field) => (touched[field] ? errors[field] : "");

  function handleChange(e) {
    setValues({ ...values, [e.target.name]: e.target.value });
  }
  function handleBlur(e) {
    setTouched({ ...touched, [e.target.name]: true });
  }
  function handleSubmit(e) {
    e.preventDefault();
    setTouched({ pincode: true, city: true }); // show every error on submit
    if (Object.values(errors).every((msg) => msg === "")) console.log(`Saved: ${values.city} ${values.pincode}`);
  }

  return (
    <form onSubmit={handleSubmit} noValidate>
      {["pincode", "city"].map((field) => (
        <p key={field}>
          <label>
            {field === "pincode" ? "PIN code" : "City"}{" "}
            <input name={field} value={values[field]} onChange={handleChange} onBlur={handleBlur} />
          </label>
          <small style={{ color: "#b91c1c" }}> {visibleError(field)}</small>
        </p>
      ))}
      <button>Save address</button>
    </form>
  );
}

createRoot(document.getElementById("root")).render(<AddressForm />);

import * as z from "zod";

export const Registration = z.object({
  name: z.string().trim().min(3, "Enter at least 3 letters."),
  email: z.email("Enter a valid email address."),
  age: z.coerce.number().int().min(16, "You must be 16 or older."),
  course: z.enum(["React", "Python", "SQL"], "Choose a course."),
});

const result = Registration.safeParse({ name: " Ab ", email: "abc", age: "15", course: "Java" });
console.log(result.success);
console.log(z.flattenError(result.error).fieldErrors);

import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { Registration } from "./schemas/registration";

export function RegistrationForm({ onSave }) {
  const {
    register,
    handleSubmit,
    setError,
    formState: { errors, isSubmitting },
  } = useForm({
    resolver: zodResolver(Registration),
    defaultValues: { name: "", email: "", age: "", course: "React" },
  });

  async function onSubmit(data) {
    const res = await onSave(data); // data is already validated and converted (age is a number)
    if (res.emailTaken) setError("email", { message: "This email is already registered." });
  }

  return (
    <form onSubmit={handleSubmit(onSubmit)} noValidate>
      <label>Name <input {...register("name")} aria-invalid={errors.name ? true : undefined} /></label>
      {errors.name && <p role="alert">{errors.name.message}</p>}
      <label>Email <input {...register("email")} /></label>
      {errors.email && <p role="alert">{errors.email.message}</p>}
      <label>Age <input {...register("age")} inputMode="numeric" /></label>
      {errors.age && <p role="alert">{errors.age.message}</p>}
      <button disabled={isSubmitting}>Register</button>
    </form>
  );
}