書くまでもない気もするけど。
こんな感じ:1
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | <script src="https://code.jquery.com/jquery-3.5.1.js"></script> <script> $(function(){ $('input[name="email_check"]').on('focusout',function(){ var emailVal = $('input[name="email"]').val(); var email2Val = $('input[name="email_check"]').val(); if(emailVal === email2Val){ if($('#emailCheckError').length){ $('#emailCheckError').remove(); } }else{ if(!$('#emailCheckError').length){ $(this).after('<p id="emailCheckError">メールアドレスが一致しません。</p>'); } $(this).focus(); } }); }); </script> <ul> <li><input type="email" name="email" placeholder="メールアドレス" required></li> <li><input type="email" name="email_check" placeholder="メールアドレス確認用" required></li> </ul> |
動作説明
- メールアドレスを入力する
- メールアドレス確認用を入力する
- 一致しなければエラー文表示
- 一致しなければ「メールアドレス確認用」にフォーカスを当て続ける
一致する内容にしなければ他の項目に移さない強制力がある内容。
これで問題なのは、『「メールアドレス」を基準にして一致不一致のチェック』をしてるから「メールアドレス」が間違ってて「メールアドレス確認用」が正しかった場合でも一旦確認用を合わせといてからメールアドレスを修正しなきゃループから脱出できないっていうどうしようもないやつ。
つまり安易な.focusout()+.focus()はヤバい。
こんな感じ:2
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 | <script src="https://code.jquery.com/jquery-3.5.1.js"></script> <script> $(function(){ var emailFlag = false; $('input[name="email_check"]').on('focusout',function(){ var emailVal = $('input[name="email"]').val(); var email2Val = $('input[name="email_check"]').val(); if(emailVal === email2Val){ emailFlag = true; if($('#emailCheckError').length){ $('#emailCheckError').remove(); } }else{ emailFlag = false; if(!$('#emailCheckError').length){ $(this).after('<p id="emailCheckError">メールアドレスが一致しません。</p>'); } } }); $('form').on('submit',function(){ if(emailFlag == false){ alert('メールアドレスが一致していません。'); $('input[name="email"]').focus(); return false; } }); }); </script> <ul> <li><input type="email" name="email" placeholder="メールアドレス" required></li> <li><input type="email" name="email_check" placeholder="メールアドレス確認用" required></li> </ul> |
動作説明
- メールアドレスを入力する
- メールアドレス確認用を入力する
- 一致しなければエラー文表示
- 一致しないままsubmitさせたらアラート表示、フォーカスをemailへ移動
修正版というか、こっちのほうがまともというか、でもこれはこれで問題もある。
focusoutをトリガーに.focus()させるのをやめたのはまあめんどいからなのと、元々注意文出してるからいいよなってのとがあったりして。submitで帳尻合わせるようにして、こっちは流石にalert出した方がいいんじゃないのって言う感じのやつ。
「return false」以降は全部止まるから、同時にやりたいことはその手前に書きましょう。
ここで問題は、nameとかidとかで「submit」を使うと.submit()が動かないってやつ。
だから、htmlを触れない場合はこれを使えないっていうね。
jQueryでsubmitしたり無効にする方法
注意点というか問題点というか仕様というか。
どう頑張っても結局の所php側でバリデーションしないと、jsを切っちゃうだけで簡単にバリデーションを無効化できちゃうんで、まあ、うん。
コメント