Reactのフォームで、エラーを出すタイミングを決める方法

export type Values = { email: string; password: string };
export type Errors = Partial<Record<keyof Values, string>>;

export function validate(values: Values): Errors {
  const errors: Errors = {};
  if (values.email === '') errors.email = 'メールアドレスを入力してください';
  else if (!/^[^@\s]+@[^@\s]+\.[^@\s]+$/.test(values.email)) errors.email = 'メールアドレスの形で入力してください';
  if (values.password.length < 8) errors.password = 'パスワードは8文字以上にしてください';
  return errors;
}

export function Field({ name, label, type = 'text', value, error, reserveSpace, onChange, onBlur }: FieldProps) {
  const errorId = `${name}-error`;
  return (
    <div className="field">
      <label htmlFor={name}>{label}</label>
      <input
        id={name}
        name={name}
        type={type}
        value={value}
        onChange={onChange}
        onBlur={onBlur}
        aria-invalid={error ? true : undefined}
        aria-describedby={error ? errorId : undefined}
      />
      {(error || reserveSpace) && (
        <p id={errorId} className="error">
          {error}
        </p>
      )}
    </div>
  );
}

function handleChange(e: ChangeEvent<HTMLInputElement>) {
  const name = e.target.name as keyof Values;
  const next = { ...values, [name]: e.target.value };
  setValues(next);
  setErrors({ ...errors, [name]: validate(next)[name] });
}

  email 1文字目「t」: メールアドレスの形で入力してください
  （中略）
  email 13文字目「.」: メールアドレスの形で入力してください
  email 14文字目「c」: なし

function handleBlur(name: keyof Values) {
  setErrors({ ...errors, [name]: validate(values)[name] });
}

  「tama」と入れた直後: email=なし / password=なし
  Tab でパスワードの欄へ: email=メールアドレスの形で入力してください / password=なし
  メールの欄に戻り「tama@example.com」に直した直後: email=メールアドレスの形で入力してください / password=パスワードは8文字以上にしてください
  Tab でもう一度パスワードの欄へ: email=なし / password=パスワードは8文字以上にしてください

export function TimingForm({ reserveSpace = false }: { reserveSpace?: boolean }) {
  const [values, setValues] = useState<Values>({ email: '', password: '' });
  const [touched, setTouched] = useState<Touched>({});
  const [submitted, setSubmitted] = useState(false);
  const [sent, setSent] = useState<string | null>(null);
  const formRef = useRef<HTMLFormElement>(null);

  // エラーは state に入れず、今の値から毎回求める
  const errors = validate(values);
  const shown = (name: keyof Values) => (touched[name] || submitted ? errors[name] : undefined);

  function handleChange(e: ChangeEvent<HTMLInputElement>) {
    setValues({ ...values, [e.target.name]: e.target.value });
  }
  function handleBlur(name: keyof Values) {
    // 空のまま通り過ぎただけなら、まだエラーを出さない（出すのは送信のとき）
    if (values[name] === '') return;
    setTouched({ ...touched, [name]: true });
  }
  function handleSubmit(e: FormEvent<HTMLFormElement>) {
    e.preventDefault();
    setSubmitted(true);
    const first = (Object.keys(values) as (keyof Values)[]).find((name) => errors[name]);
    if (first) {
      // 最初にエラーのある欄へフォーカスを移す
      const input = formRef.current?.elements.namedItem(first);
      if (input instanceof HTMLInputElement) input.focus();
      return;
    }
    setSent(values.email);
  }
  // （JSX は省略。Field に error={shown('email')} などを渡す）
}

  「tama」と入れた直後: email=なし / password=なし
  Tab でパスワードの欄へ: email=メールアドレスの形で入力してください / password=なし
  （中略）
  email 13文字目「.」: メールアドレスの形で入力してください
  email 14文字目「c」: なし

  パスワードが空のまま「登録する」を押した: email=なし / password=パスワードは8文字以上にしてください
  フォーカスのある欄: #password
  （中略）
  password 7文字目「3」: パスワードは8文字以上にしてください
  password 8文字目「4」: なし
  もう一度「登録する」を押した: 送信しました：tama@example.com

  メールの欄から何も入れずに Tab: email=なし / password=なし
  そのまま「登録する」を押した: email=メールアドレスを入力してください / password=パスワードは8文字以上にしてください
  フォーカスのある欄: #email

  このときのメールの欄: aria-invalid=true aria-describedby=email-error
  直したあとのメールの欄: aria-invalid=null aria-describedby=null

  #timing: ボタンの上端 192px → 220px、高さ 40px
  #timing: click の対象 INPUT、click の対象 INPUT、click の対象 FORM
  #timing: email=メールアドレスの形で入力してください / password=なし、フォーカス BUTTON

.error { color: #b8325a; margin: 4px 0 0; min-height: 1.5em; line-height: 1.5; }

  #reserve: ボタンの上端 248px → 248px、高さ 40px
  #reserve: click の対象 INPUT、click の対象 INPUT、click の対象 BUTTON、submit が起きた
  #reserve: email=メールアドレスの形で入力してください / password=なし、フォーカス INPUT#email