React Signup Form Validation With Zod and Field-Level Errors

import { useCallback, useMemo, useState } from "react";
import type { ZodSchema } from "zod";

type Errors<T> = Partial<Record<keyof T, string>>;
type Touched<T> = Partial<Record<keyof T, boolean>>;

export function useZodForm<T extends Record<string, unknown>>(
  schema: ZodSchema<T>,
  initial: T
) {
  const [values, setValues] = useState<T>(initial);
  const [touched, setTouched] = useState<Touched<T>>({});
  const [submitted, setSubmitted] = useState(false);

  const allErrors = useMemo<Errors<T>>(() => {
    const result = schema.safeParse(values);
    if (result.success) return {};
    const fieldErrors = result.error.flatten().fieldErrors;
    return Object.keys(fieldErrors).reduce((acc, key) => {
      const messages = fieldErrors[key as keyof T];
      if (messages && messages.length) acc[key as keyof T] = messages[0];
      return acc;
    }, {} as Errors<T>);
  }, [schema, values]);

  const visibleErrors = useMemo<Errors<T>>(() => {
    if (submitted) return allErrors;
    return Object.keys(allErrors).reduce((acc, key) => {
      if (touched[key as keyof T]) acc[key as keyof T] = allErrors[key as keyof T];
      return acc;
    }, {} as Errors<T>);
  }, [allErrors, touched, submitted]);

  const setField = useCallback((name: keyof T, value: string) => {
    setValues((prev) => ({ ...prev, [name]: value }));
  }, []);

  const blurField = useCallback((name: keyof T) => {
    setTouched((prev) => ({ ...prev, [name]: true }));
  }, []);

  const handleSubmit = useCallback(
    (onValid: (values: T) => void) => (e: React.FormEvent) => {
      e.preventDefault();
      setSubmitted(true);
      const result = schema.safeParse(values);
      if (result.success) onValid(result.data);
    },
    [schema, values]
  );

  return { values, errors: visibleErrors, setField, blurField, handleSubmit };
}

import React from "react";
import { signupSchema, type SignupValues } from "./signupSchema";
import { useZodForm } from "./useZodForm";

const initial: SignupValues = {
  email: "",
  username: "",
  password: "",
  confirmPassword: "",
};

export function SignupForm() {
  const { values, errors, setField, blurField, handleSubmit } = useZodForm(
    signupSchema,
    initial
  );

  const onValid = (data: SignupValues) => {
    console.log("submitting", data);
  };

  const Field = (props: { name: keyof SignupValues; label: string; type?: string }) => {
    const { name, label, type = "text" } = props;
    const error = errors[name];
    const errorId = `${String(name)}-error`;
    return (
      <div className="field">
        <label htmlFor={String(name)}>{label}</label>
        <input
          id={String(name)}
          type={type}
          value={values[name]}
          onChange={(e) => setField(name, e.target.value)}
          onBlur={() => blurField(name)}
          aria-invalid={error ? true : undefined}
          aria-describedby={error ? errorId : undefined}
        />
        {error && (
          <p id={errorId} className="field-error" role="alert">
            {error}
          </p>
        )}
      </div>
    );
  };

  return (
    <form noValidate onSubmit={handleSubmit(onValid)}>
      <Field name="email" label="Email" type="email" />
      <Field name="username" label="Username" />
      <Field name="password" label="Password" type="password" />
      <Field name="confirmPassword" label="Confirm password" type="password" />
      <button type="submit">Create account</button>
    </form>
  );
}