Labyrinth of Wisdom

-This is My Archive-


メールアドレス入力フォームでの値の比較・確認

「メールアドレス」と「確認用メールアドレス」の入力値を照らし合わせて、一致しなかった場合はエラーメッセージを出すという、入力フォームでよくある機能のサンプルを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>

アラート表示-JavaScript入門

サンプル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>

制約 - フォーム - HTML要素 - HTML5 タグリファレンス - HTML5.JP