本文へスキップ

インライン検証・送信時サマリ・両方

入力エラーを、打っている間のインライン・送信時のサマリ・両方のどれで出す?

判断表

判断軸リアルタイム検証
打つたびに欄の脇で判定
エラーサマリ
送信で先頭にまとめ、各欄へ飛ぶ
新規登録フォーム
欄を離れたら判定し、送信で全欄を再検査
判定のタイミングinput ごと。打ち始めた瞬間から送信ボタンを押したときblur で1回、以後は入力しながら回復。送信で全欄
打ち途中の煩わしさ打ち始めで赤くなり、途中で「間違い」と言われるなし。書き終わるまで何も言わないなし。離れるまで黙っている
エラーの見つけやすさその場で見える。長いフォームでは上のエラーを見失う件数と一覧が先頭にあり、リンクで各欄へ飛べる各欄に残る。サマリは無いので長いフォームでは弱い
支援技術見本には aria-live も aria-invalid も無い(解説で補足)サマリへフォーカス移動・aria-invalid・describedby が揃うaria-describedby はあるが aria-invalid は付けていない
向くフォーム形式が決まる1〜2欄(メール・パスワード)欄が多い申込・登録。1画面に収まらないもの5欄前後の登録フォーム

迷ったらこれ

迷ったら「欄を離れたら判定し、送信で全欄を再検査」。打ち途中を邪魔せず、送信前に直せる。ただし欄が多く1画面に収まらないなら送信時サマリを必ず足し、フォーカスを見出しへ移す。打つたびの判定は形式が固いパスワードなどに限る。

エラーは色だけで示さない(アイコン・文言を添える)。修正して正しくなったら即座に消す。送信ボタンを無効化して待たせる型は、なぜ押せないかが分からないので避ける。

候補の見本

  • 入力

    リアルタイム検証解説あり

    Inline Validation

    メールアドレスを入力すると形式を即時判定し、✓(緑)/ ✗(赤)とメッセージでフィードバックする。

  • 入力

    エラーサマリ解説あり実例あり

    Error Summary

    送信すると先頭に「3 件の入力に問題があります」が現れてフォーカスが移り、各項目へのリンクで飛べる。項目側は aria-invalid と aria-describedby で理由が読まれる。

  • 入力

    新規登録フォーム

    Sign Up Form

    お名前・メール・パスワード(簡易強度表示)・利用規約同意を備えた新規登録フォーム。各欄はフォーカスを外した時点で検証し、問題があればその場でメッセージを出す。