JavaScriptで同値チェックを実装してHTML5と同じデザインのエラーを出す方法

公開日:2017/05/20  最終更新日:2018/05/02  カテゴリー:HTML / CSS / JS

HTML5では input タグの type 属性に email を指定すると 入力された値が メールアドレスか自動で確認してくれるなど 随分と楽になりました。
しかしながら HTML5 では メールアドレスやパスワードを確認のために入力してもらった際に必要な 同値チェック できる仕組みが無く 自前で準備する必要があります。
今回は HTML5 が type属性などの確認時に出すエラーと 同じデザインでエラーを出す方法をご紹介します。

HTMLのソース

  1. <div class="form-group">
  2. <label>パスワード</label>
  3. <input type="password" class="form-control" name="password" id="password" required>
  4. </div>
  5. <div class="form-group">
  6. <label>パスワード (再確認)</label>
  7. <input type="password" class="form-control" name="confirm" oninput="CheckPassword(this)" required>
  8. </div>

JavaScriptのソース

  1. <script>
  2. function CheckPassword(confirm){
  3. // 入力値取得
  4. var input1 = password.value;
  5. var input2 = confirm.value;
  6. // パスワード比較
  7. if(input1 != input2){
  8. confirm.setCustomValidity("入力値が一致しません。");
  9. }else{
  10. confirm.setCustomValidity('');
  11. }
  12. }
  13. </script>

サンプル

実際の動作を試してみてください。
未入力の時に HTML5によって発生するエラーと 同値チェックの時に発生するエラーのデザインが同じで、統一感があるのがお分かりいただけるのではないでしょうか。

※サンプルの都合上 form と button タグを追加しました。

参考文献

本サイトでは URLに日本語を含んでいます。
メールなどで共有する場合は リンクとして認識されない場合がございますので、こちらをご利用ください。