インライン検証・送信時サマリ・両方
入力エラーを、打っている間のインライン・送信時のサマリ・両方のどれで出す?
判断表
| 判断軸 | リアルタイム検証 打つたびに欄の脇で判定 | エラーサマリ 送信で先頭にまとめ、各欄へ飛ぶ | 新規登録フォーム 欄を離れたら判定し、送信で全欄を再検査 |
|---|---|---|---|
| 判定のタイミング | input ごと。打ち始めた瞬間から | 送信ボタンを押したとき | blur で1回、以後は入力しながら回復。送信で全欄 |
| 打ち途中の煩わしさ | 打ち始めで赤くなり、途中で「間違い」と言われる | なし。書き終わるまで何も言わない | なし。離れるまで黙っている |
| エラーの見つけやすさ | その場で見える。長いフォームでは上のエラーを見失う | 件数と一覧が先頭にあり、リンクで各欄へ飛べる | 各欄に残る。サマリは無いので長いフォームでは弱い |
| 支援技術 | 見本には aria-live も aria-invalid も無い(解説で補足) | サマリへフォーカス移動・aria-invalid・describedby が揃う | aria-describedby はあるが aria-invalid は付けていない |
| 向くフォーム | 形式が決まる1〜2欄(メール・パスワード) | 欄が多い申込・登録。1画面に収まらないもの | 5欄前後の登録フォーム |
迷ったらこれ
迷ったら「欄を離れたら判定し、送信で全欄を再検査」。打ち途中を邪魔せず、送信前に直せる。ただし欄が多く1画面に収まらないなら送信時サマリを必ず足し、フォーカスを見出しへ移す。打つたびの判定は形式が固いパスワードなどに限る。
エラーは色だけで示さない(アイコン・文言を添える)。修正して正しくなったら即座に消す。送信ボタンを無効化して待たせる型は、なぜ押せないかが分からないので避ける。
候補の見本
- 入力
リアルタイム検証解説あり
Inline Validation
メールアドレスを入力すると形式を即時判定し、✓(緑)/ ✗(赤)とメッセージでフィードバックする。
- JS
- 入力
エラーサマリ解説あり実例あり
Error Summary
送信すると先頭に「3 件の入力に問題があります」が現れてフォーカスが移り、各項目へのリンクで飛べる。項目側は aria-invalid と aria-describedby で理由が読まれる。
- JS
- 入力
新規登録フォーム
Sign Up Form
お名前・メール・パスワード(簡易強度表示)・利用規約同意を備えた新規登録フォーム。各欄はフォーカスを外した時点で検証し、問題があればその場でメッセージを出す。
- JS