インラインバリデーション

Inline Validation

別名: リアルタイムバリデーション、その場バリデーション、フィールドバリデーション、入力検証、Live validation、Real-time validation、Input feedback

生態(さわってみる)

一言定義

入力中または入力直後に、その場でエラーの有無をフィールド脇に伝える検証UI。

分類

使う場面

  • パスワードやメールアドレスなど、送信前に形式ミスへ早めに気づかせたいとき
  • 入力欄の数が多く、送信後にまとめてエラーを出すとやり直しの手戻りが大きいとき

避ける場面

  • 入力途中の値を否定し続けて不安にさせる恐れがあるとき(フォーカス離脱を待って検証する等の配慮が必要)
  • 妥当性の判定にサーバー側の重い処理が必要で、リアルタイム表示が非現実的なとき

近縁種との比較

テキストフィールドなど個々の入力欄に対して、送信後ではなく入力中または入力直後に その場でエラーを伝える検証手法がインラインバリデーションである。1文字入力するたびに 否定し続けるとユーザーを不安にさせるため、フォーカスが外れたタイミング(blur)や入力が 一区切りついたタイミングで検証するのが定石とされる。ページ全体のエラーを一覧化する 「エラーサマリー」とは異なるレベルの手法であり、両方を併用することも多い。

実例リンク

アクセシビリティ

role
入力欄に aria-invalid="true/false"、エラーメッセージ要素に aria-describedby で関連付け、メッセージ領域は role="alert"
キーボード操作
通常のフォーカス移動のみ。エラーメッセージを読み上げさせるための強制的なフォーカス移動はしない
補足
入力の都度ではなく、フォーカスが外れたタイミング(blur)や入力が一区切りついたタイミングで検証するのが定石。入力の途中経過を否定し続けると不安を煽る(GOV.UKのエラーメッセージパターン)