フォームのバリデーション、リアルタイムかsubmit時か問題

フォームの入力チェックを、入力中にリアルタイムでやるか、送信ボタンを押したときにまとめてやるか。これ、地味に毎回悩むポイントです。

リアルタイムチェックで自爆した話

リアルタイムチェックは親切っぽいんですが、実装を雑にやると「まだ入力途中なのにエラー表示が出る」という煩わしい状態になります。実際、自分も最初にこれをやらかして、1文字入れるたびに赤い文字が出る鬱陶しいフォームを作ってしまったことがあります。

「入力を終えたタイミング」をちゃんと判定する工夫がいる、というのはこの失敗から学びました。

送信時にまとめてチェックする方式はシンプルなんですが、複数項目に不備があると利用者が一度に全部を把握しにくくなるので、エラー箇所まで自動スクロールするみたいな配慮が欠かせません。

個人的な感覚としては、メールアドレスの形式みたいに単体で判定しやすい項目はリアルタイムに向いていて、複数の項目が絡み合うような複雑な検証は送信時にまとめる方が実装も楽、というのが今のところの落としどころです。

「入力が終わったタイミング」の見極め方

リアルタイムチェックを入れるときによく使うのが、入力欄からフォーカスが外れた瞬間（blurイベント）を合図にする方法です。1文字打つたびに判定するのではなく、その項目の入力を終えて次に移った瞬間にチェックする形にするだけで、「入力中に赤い文字が出てうるさい」という煩わしさはかなり和らぎます。逆に、パスワードの強度表示のように「入力しながらリアルタイムで見たい」情報もあるので、全項目を同じルールで扱わず、項目の性質ごとにタイミングを使い分けるのが結局一番しっくりきています。