Field-by-Field Signup Validation with a Reusable useForm Hook in React

import { useCallback, useMemo, useState } from 'react';

export function useForm({ initialValues, validators }) {
  const [values, setValues] = useState(initialValues);
  const [touched, setTouched] = useState({});

  const runValidators = useCallback(
    (vals) => {
      const result = {};
      for (const name of Object.keys(validators)) {
        result[name] = validators[name](vals[name], vals);
      }
      return result;
    },
    [validators]
  );

  const errors = useMemo(() => runValidators(values), [values, runValidators]);
  const isValid = useMemo(() => Object.values(errors).every((e) => !e), [errors]);

  const handleChange = useCallback((event) => {
    const { name, value } = event.target;
    setValues((prev) => ({ ...prev, [name]: value }));
  }, []);

  const handleBlur = useCallback((event) => {
    const { name } = event.target;
    setTouched((prev) => ({ ...prev, [name]: true }));
  }, []);

  const getFieldProps = useCallback(
    (name) => ({
      name,
      value: values[name] ?? '',
      onChange: handleChange,
      onBlur: handleBlur,
      'aria-invalid': touched[name] && !!errors[name],
      'aria-describedby': `${name}-error`,
    }),
    [values, touched, errors, handleChange, handleBlur]
  );

  const handleSubmit = useCallback(
    (onValid) => (event) => {
      event.preventDefault();
      const allTouched = Object.keys(validators).reduce(
        (acc, name) => ({ ...acc, [name]: true }),
        {}
      );
      setTouched(allTouched);
      if (Object.values(runValidators(values)).every((e) => !e)) {
        onValid(values);
      }
    },
    [values, validators, runValidators]
  );

  return { values, errors, touched, isValid, getFieldProps, handleSubmit };
}

export function FieldError({ name, error, touched }) {
  const visible = touched && !!error;
  return (
    <span
      id={`${name}-error`}
      role="alert"
      className={visible ? 'field-error field-error--visible' : 'field-error'}
    >
      {visible ? error : ''}
    </span>
  );
}

import { useForm } from './useForm';
import { FieldError } from './FieldError';
import { required, minLength, isEmail, matches, compose } from './validators';

const validators = {
  email: compose(required(), isEmail()),
  password: compose(required(), minLength(8)),
  confirm: compose(
    required('Please confirm your password'),
    matches((v) => v.password, 'Passwords must match')
  ),
};

export default function SignupForm({ onRegister }) {
  const { errors, touched, isValid, getFieldProps, handleSubmit } = useForm({
    initialValues: { email: '', password: '', confirm: '' },
    validators,
  });

  return (
    <form noValidate onSubmit={handleSubmit(onRegister)}>
      <label htmlFor="email">Email</label>
      <input id="email" type="email" autoComplete="email" {...getFieldProps('email')} />
      <FieldError name="email" error={errors.email} touched={touched.email} />

      <label htmlFor="password">Password</label>
      <input id="password" type="password" autoComplete="new-password" {...getFieldProps('password')} />
      <FieldError name="password" error={errors.password} touched={touched.password} />

      <label htmlFor="confirm">Confirm password</label>
      <input id="confirm" type="password" autoComplete="new-password" {...getFieldProps('confirm')} />
      <FieldError name="confirm" error={errors.confirm} touched={touched.confirm} />

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