メールアドレス入力フォームでの値の比較・確認
「メールアドレス」と「確認用メールアドレス」の入力値を照らし合わせて、一致しなかった場合はエラーメッセージを出すという、入力フォームでよくある機能のサンプルを2パターン記載します。
どちらもJavaScriptを使用するんですが、エラーメッセージの出し方を変えています。 状況に応じて使い分けてみてください。
サンプル1
エラーメッセージをJavaScriptのアラートで表現したパターンです。 こっちの方がコード的には簡単です。
<form onSubmit="return CheckEmail_1()"> <div> <label for="email_1">メール:</label> </div> <div> <input type="email" id="email_1" required> </div> <div> <label for="emailConfirm_1">メール確認用:</label> </div> <div> <input type="email" id="emailConfirm_1" required> </div> <p> <input type="submit" id="submit"> </p> </form> <script language="JavaScript" type="text/javascript"> <!-- function CheckEmail_1() { //IE対応の為変更 //var mail = email_1.value; //メールフォームの値を取得 //var mailConfirm = emailConfirm_1.value; //メール確認用フォームの値を取得 var mail = document.getElementById("email_1").value; //メールフォームの値を取得 var mailConfirm = document.getElementById("emailConfirm_1").value; //メール確認用フォームの値を取得 // パスワードの一致確認 if (mail != mailConfirm){ alert("パスワードと確認用パスワードが一致しません"); // 一致していなかったら、エラーメッセージを表示する return false; }else{ return true; } }; // --> </script>
サンプル2
こちらはエラーメッセージをHTML5の入力チェック方式で表現したパターンです。 他の値もHTML5で入力チェックをしていた場合は、こちらの方がメッセージの形式に統一感があるので見栄えがいいです。
<form> <div> <label for="email_2">メール:</label> </div> <div> <input type="email" id="email_2" required /> </div> <div> <label for="emailConfirm_2">メール確認用:</label> </div> <div> <input type="email" id="emailConfirm_2" required oninput="CheckEmail_2(this)" /> </div> <p> <input type="submit" id="submit"> </p> </form> <script language="JavaScript" type="text/javascript"> <!-- function CheckEmail_2(input){ //IE対応の為変更 //var mail = email_2.value; //メールフォームの値を取得 var mail = document.getElementById("email_2").value; //メールフォームの値を取得 var mailConfirm = input.value; //メール確認用フォームの値を取得(引数input) // パスワードの一致確認 if(mail != mailConfirm){ input.setCustomValidity('メールアドレスが一致しません'); // エラーメッセージのセット }else{ input.setCustomValidity(''); // エラーメッセージのクリア } } // --> </script>