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

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

Contents

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

こんな感じ：1

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

$(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を切っちゃうだけで簡単にバリデーションを無効化できちゃうんで、まあ、うん。