インラインバリデーション付き入力欄
インラインバリデーションは、入力欄から フォーカスが外れた瞬間に内容をチェック し、その場でエラーや成功メッセージを表示する UX です。この実装は blur イベントで値を取得し、メールアドレスの形式を正規表現で判定して、入力欄に is-ok （緑）か is-error （赤）のクラスを付け、下のメッセージ枠にテ…
解説
インラインバリデーションは、入力欄からフォーカスが外れた瞬間に内容をチェックし、その場でエラーや成功メッセージを表示する UX です。この実装は blur イベントで値を取得し、メールアドレスの形式を正規表現で判定して、入力欄に is-ok（緑）か is-error（赤）のクラスを付け、下のメッセージ枠にテキストを差し込みます。空欄のときはクラスもメッセージも消して、過剰な警告を出さない配慮もされています。
適した場面
- メールアドレスや電話番号の形式チェック
- 必須項目の空欄検知
- パスワード強度などの即時フィードバック
チェック内容を変えるには JavaScript 内の正規表現を、電話番号や郵便番号など目的のパターンへ差し替えます。色は is-ok・is-error の枠線色を変えると印象が変わります。注意点として、緑や赤の色だけで正誤を伝えると色覚特性のある人に届きにくいため、テキストメッセージやアイコンを併用するこの方式は理にかなっています。送信時にもう一度サーバー側で検証することも忘れないでください。
使用例・適したシーン
- お問い合わせフォーム
- ニュースレター登録
- 資料請求フォーム
- ログイン・新規登録
よくある質問
メール以外の項目もチェックできますか？
はい。JavaScript 内の正規表現を、電話番号や郵便番号など目的のパターンに差し替えれば対応できます。複数項目に使う場合は、入力欄ごとに同じ仕組みを割り当ててください。
入力中にリアルタイムで検証する形にできますか？
現状は blur（フォーカスが外れたとき）に判定しています。input イベントに変えると 1 文字ごとに検証できますが、入力途中で赤く警告が出てうるさく感じることもあるため、確定後にチェックする現方式が無難です。