リアルタイムフォームバリデーション
入力しながらその場で正否を知らせる リアルタイムフォームバリデーション です。各入力欄に input イベントを張り、文字を打つたびに検証関数を呼んでエラー文を出し分けます。名前は2文字以上か、メールは正規表現で形式が正しいかを判定し、結果に応じて is-error や is-ok のクラスを付け替えて枠線を赤や緑…
解説
入力しながらその場で正否を知らせるリアルタイムフォームバリデーションです。各入力欄に input イベントを張り、文字を打つたびに検証関数を呼んでエラー文を出し分けます。名前は2文字以上か、メールは正規表現で形式が正しいかを判定し、結果に応じて is-error や is-ok のクラスを付け替えて枠線を赤や緑に変えます。送信ボタンを押した際は preventDefault でページ遷移を止め、その場で完了を伝えます。
使う場面
- 問い合わせフォームや資料請求フォーム
- 会員登録やニュースレターの購読受付
- 予約・申し込みの入力画面
検証ルールは各 validate 呼び出しの関数を書き換えるだけで、電話番号や桁数などにも応用できます。エラー文は具体的な指示にすると親切です。送信ボタンを押すまで待たず入力中に知らせる方式なので、誤入力にすぐ気づけます。label と入力欄を for で結び、エラー文を読み上げ環境にも伝える配慮を加えるとさらに使いやすくなります。
使用例・適したシーン
- お問い合わせフォーム
- ニュースレター登録
- 資料請求フォーム
- ログイン・新規登録
よくある質問
検証ルールを追加・変更できますか
はい。各入力欄に渡している検証関数を書き換えるだけです。文字数や正規表現の条件を変えれば、電話番号や郵便番号などのチェックにも応用できます。
送信時にサーバーへデータは飛びますか
このサンプルは送信を止めて完了メッセージを出すデモです。実運用では preventDefault のあとに fetch などで送信処理を追加してください。