書くまでもない気もするけど。
こんな感じ：1
<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
<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を切っちゃうだけで簡単にバリデーションを無効化できちゃうんで、まあ、うん。
コメント