[jQuery]メールアドレス確認用バリデーション簡易版

Reading Time: < 1 minute

書くまでもない気もするけど。

Contents

1 こんな感じ：1
- 1.1 動作説明
2 こんな感じ：2
- 2.1 動作説明
3 注意点というか問題点というか仕様というか。

こんな感じ：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>

$(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>

</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>

$(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>

</ul>

動作説明

メールアドレスを入力する
メールアドレス確認用を入力する
一致しなければエラー文表示
一致しないままsubmitさせたらアラート表示、フォーカスをemailへ移動

修正版というか、こっちのほうがまともというか、でもこれはこれで問題もある。

focusoutをトリガーに.focus()させるのをやめたのはまあめんどいからなのと、元々注意文出してるからいいよなってのとがあったりして。submitで帳尻合わせるようにして、こっちは流石にalert出した方がいいんじゃないのって言う感じのやつ。
「return false」以降は全部止まるから、同時にやりたいことはその手前に書きましょう。

ここで問題は、nameとかidとかで「submit」を使うと.submit()が動かないってやつ。
だから、htmlを触れない場合はこれを使えないっていうね。
jQueryでsubmitしたり無効にする方法

注意点というか問題点というか仕様というか。

どう頑張っても結局の所php側でバリデーションしないと、jsを切っちゃうだけで簡単にバリデーションを無効化できちゃうんで、まあ、うん。