【JavaScript】パスワード、パスワードの再入力バリデーション

パスワードとパスワードの再入力が同じでなければ、ボタンを押した際にエラーメッセージを出すというJavaScriptコードをメモしておく

HTML

<p id="error_msg" class="font-red"></p>
            <label for="password">新しいパスワード<sup class="font-red font-normal">*</sup></label>
            <input id="password" type="password" name="password" placeholder="パスワード" required>
            <label for="confirm_password">新しいパスワードの再入力<sup class="font-red font-normal">*</sup></label>
            <input id="confirm_password" type="password" name="confirm_password" placeholder="パスワード" required>
            <button type="submit" class="btn btn-blue text-bold" onclick="return confirmPassword();">パスワードを再設定する</button>

JavaScript

function confirmPassword() {
  const password = document.getElementById('password').value;
  const confirmPassword = document.getElementById('confirm_password').value;
            const errorMsg = document.getElementById('error_msg');

            if (password == confirmPassword) {
                errorMsg.innerText = "";
                return true;
            } else {
                errorMsg.innerText = "パスワードが一致しません";
                return false;
            }
        }