入力フォームのエラーチェックをリアルタイムに行いたい

Question

お世話になっております。
現在、会員登録ページの作成を行っています。
そこで、電話番号が入力されると、規定の文字数(10、11文字)以外はエラーが出るようにしたいと考えています。
現在はsubmitクリック時にエラーチェックを走らせているのですが、こちらのサイト→環境生活のように、リアルタイムに判定を行いたいです。

リアルタイム判定を実装するにはどのような手法があるのか、ご教示願いたいです。
何卒宜しくお願い致します。

Answer 1

jQuery Validation Engineを利用する

Comments

[m.ts10806]

あ、解決してた。
自作よりプラグイン使った方が早いかなと思います。

[atmn3356]

mts10806様、ご回答ありがとうございます。
このようなやり方もあるのですね！
今後、同様の処理を行う際に使用してみます。

Answer 2

入力されると、規定の文字数(10、11文字)以外はエラー

これは悪いUIですね
ユーザーが1文字でも入力した瞬間にエラーが表示されますよね？
そういうインタフェースをされるとユーザーはストレスを感じます。
入力時のリアルタイムチェックをするなら12文字以上だけチェックしてください

Comments

[atmn3356]

yambejp様、回答ありがとうございます。
質問文に貼ったリンクのサイトを参考にしたのですが、
確かにストレスを感じるかもしれないですね。
１２文字以上でチェックに変更します。
ご指摘ありがとうございました。

Answer 3

入力のテキストボックスに対して何らかの文字を入力したときに発生するイベントonInputに対して処理を書くのが一般的です。

【参考】

• MDN - GlobalEventHandlers.oninput

Comments

[atmn3356]

euledge様、ご回答ありがとうございます。
無事に実装できました！
助かりました、ありがとうございました！