概要

設定方法

<div class="field">
  <input
   type="email"
   id="RegisterForm-email-confirm"
   spellcheck="false"
   autocapitalize="off"
   placeholder="確認用メール"
   >
  <label for="RegisterForm-email-confirm">確認用メール</label>
</div>
<div id="RegisterForm-email-status"></div>

<script>
// submitボタンの参照を取得
const submitButton = document.querySelector('#create_customer button');
const registerFormEmail = document.getElementById('RegisterForm-email');
const registerFormEmailConfirm = document.getElementById('RegisterForm-email-confirm');
const registerFormEmailStatus = document.getElementById('RegisterForm-email-status');

// 初期状態でsubmitボタンを無効にする
submitButton.disabled = true;

// 2つのメールアドレスの値が同じかどうかをチェックする関数
const checkEmailsMatch =  () => {
  if (registerFormEmail.value !== '' && registerFormEmailConfirm.value !== '' ) {
    if (registerFormEmail.value === registerFormEmailConfirm.value) {
        submitButton.disabled = false;  // 一致してかつ空でない場合、ボタンを有効にする
        registerFormEmailStatus.innerText = 'メールアドレスは一致しています';
        registerFormEmailStatus.classList.remove("ng");
    } else {
        submitButton.disabled = true;   // それ以外の場合はボタンを無効にする
        registerFormEmailStatus.innerText = 'メールアドレスが一致していません';
        registerFormEmailStatus.classList.add("ng");
    }
  } else {
    registerFormEmailStatus.innerText = '';
    registerFormEmailStatus.classList.remove("ng");
  }
}

// 両方にイベントリスナーを追加（'input'イベントはフォームの内容がユーザーによって変更された時に発火）
registerFormEmail.addEventListener('input', checkEmailsMatch);
registerFormEmailConfirm.addEventListener('input', checkEmailsMatch);

// ページの初期読み込み時にも一度チェックを行う
checkEmailsMatch();
</script>
<style>
  #RegisterForm-email-status {
    color: #00902E;
  }
  #RegisterForm-email-status.ng {
    color: #C00;
  }
</style>