Field-Level Signup Validation with Zod and a Typed useZodForm Hook

import { useCallback, useState } from 'react';
import { z, ZodError, ZodType } from 'zod';

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

function flattenErrors<T>(error: ZodError): Errors<T> {
  const result: Errors<T> = {};
  for (const issue of error.issues) {
    const key = issue.path[0] as keyof T | undefined;
    if (key != null && result[key] === undefined) {
      result[key] = issue.message;
    }
  }
  return result;
}

export function useZodForm<T extends Record<string, unknown>>(
  schema: ZodType<T>,
  initial: T
) {
  const [values, setValues] = useState<T>(initial);
  const [errors, setErrors] = useState<Errors<T>>({});

  const setField = useCallback(
    <K extends keyof T>(name: K, value: T[K]) => {
      setValues((prev) => ({ ...prev, [name]: value }));
      setErrors((prev) => {
        if (prev[name] === undefined) return prev;
        const next = { ...prev };
        delete next[name];
        return next;
      });
    },
    []
  );

  const validate = useCallback((): T | null => {
    const parsed = schema.safeParse(values);
    if (parsed.success) {
      setErrors({});
      return parsed.data;
    }
    setErrors(flattenErrors<T>(parsed.error));
    return null;
  }, [schema, values]);

  return { values, errors, setField, validate };
}

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

const EMPTY: SignupValues = {
  email: '',
  username: '',
  password: '',
  confirmPassword: '',
};

export function SignupForm({
  onSubmit,
}: {
  onSubmit: (values: SignupValues) => Promise<void>;
}) {
  const { values, errors, setField, validate } = useZodForm(signupSchema, EMPTY);

  async function handleSubmit(event: React.FormEvent) {
    event.preventDefault();
    const data = validate();
    if (data) {
      await onSubmit(data);
    }
  }

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

  return (
    <form onSubmit={handleSubmit} noValidate>
      {field('email', 'email')}
      {field('username')}
      {field('password', 'password')}
      {field('confirmPassword', 'password')}
      <button type="submit">Create account</button>
    </form>
  );
}