インラインバリデーション
Inline Validation
別名: リアルタイムバリデーション、その場バリデーション、フィールドバリデーション、入力検証、Live validation、Real-time validation、Input feedback
生態(さわってみる)
一言定義
入力中または入力直後に、その場でエラーの有無をフィールド脇に伝える検証UI。
分類
使う場面
- パスワードやメールアドレスなど、送信前に形式ミスへ早めに気づかせたいとき
- 入力欄の数が多く、送信後にまとめてエラーを出すとやり直しの手戻りが大きいとき
避ける場面
- 入力途中の値を否定し続けて不安にさせる恐れがあるとき(フォーカス離脱を待って検証する等の配慮が必要)
- 妥当性の判定にサーバー側の重い処理が必要で、リアルタイム表示が非現実的なとき
近縁種との比較
テキストフィールドなど個々の入力欄に対して、送信後ではなく入力中または入力直後に その場でエラーを伝える検証手法がインラインバリデーションである。1文字入力するたびに 否定し続けるとユーザーを不安にさせるため、フォーカスが外れたタイミング(blur)や入力が 一区切りついたタイミングで検証するのが定石とされる。ページ全体のエラーを一覧化する 「エラーサマリー」とは異なるレベルの手法であり、両方を併用することも多い。
近縁種
実例リンク
アクセシビリティ
- role
- 入力欄に aria-invalid="true/false"、エラーメッセージ要素に aria-describedby で関連付け、メッセージ領域は role="alert"
- キーボード操作
- 通常のフォーカス移動のみ。エラーメッセージを読み上げさせるための強制的なフォーカス移動はしない
- 補足
- 入力の都度ではなく、フォーカスが外れたタイミング(blur)や入力が一区切りついたタイミングで検証するのが定石。入力の途中経過を否定し続けると不安を煽る(GOV.UKのエラーメッセージパターン)