【jQuery】確認用メールアドレスの一致チェック完全ガイド｜リアルタイム・ペースト禁止・送信制御・UXデザインまで

メールアドレスの入力ミスを防ぐため、「メールアドレス」と「確認用メールアドレス」を2回入力させるフォームは一般的です。この記事ではリアルタイム一致チェック・ペースト禁止・フォーム送信制御・UX設計のベストプラクティスまで解説します。

リアルタイム一致チェックの基本実装

<input type="email" id="email" placeholder="メールアドレス">
<input type="email" id="email-confirm" placeholder="メールアドレス（確認）">
<p id="email-error" style="color:red"></p>

$(function () {
  function checkMatch() {
    var email   = $('#email').val();
    var confirm = $('#email-confirm').val();

    // 確認欄が空の間はエラーを表示しない
    if (confirm === '') {
      $('#email-error').text('');
      return;
    }

    if (email !== confirm) {
      $('#email-error').text('メールアドレスが一致しません');
    } else {
      $('#email-error').text('');
    }
  }

  // 両方の入力欄の変更を監視
  $('#email, #email-confirm').on('input', checkMatch);
});

確認欄へのペースト禁止

手打ちを強制することで、コピペによる同じタイポを2回繰り返すミスを防ぎます。

$(function () {
  // 確認欄へのペースト・ドラッグ&ドロップを禁止
  $('#email-confirm').on('paste drop', function (e) {
    e.preventDefault();
    $('#email-error').text('確認欄には直接入力してください');
  });
});

フォーム送信時の一致チェックとブロック

$(function () {
  $('form').on('submit', function (e) {
    var email   = $('#email').val();
    var confirm = $('#email-confirm').val();

    if (email !== confirm) {
      e.preventDefault(); // 送信をブロック
      $('#email-error').text('メールアドレスが一致しません').show();
      $('#email-confirm').focus(); // 確認欄にフォーカス
      return;
    }

    $('#email-error').hide();
  });
});

メール形式バリデーションと組み合わせる

function isValidEmail(str) {
  // 簡易的なメール形式チェック
  return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(str);
}

$(function () {
  $('form').on('submit', function (e) {
    var email   = $('#email').val();
    var confirm = $('#email-confirm').val();
    var errors  = [];

    if (!isValidEmail(email)) {
      errors.push('メールアドレスの形式が正しくありません');
    }
    if (email !== confirm) {
      errors.push('メールアドレスが一致しません');
    }

    if (errors.length > 0) {
      e.preventDefault();
      $('#email-error').html(errors.join('<br>')).show();
    } else {
      $('#email-error').hide();
    }
  });
});

確認欄不要論とモダンなUX設計

NNGroupの研究では確認欄はエラー率を下げない場合もあると報告されています。新規フォームでは「確認欄を省略して確認メールを送る」設計も検討してください。

まとめ

メールアドレス一致チェックの実装ポイントをまとめます。

• リアルタイムチェック: 確認欄が空の間はエラーを出さない
• ペースト禁止: paste drop イベントで e.preventDefault()
• 送信制御: form submit で一致チェック → 不一致なら e.preventDefault()
• 形式チェックと組み合わせてエラーをまとめて表示
• 確認欄が本当に必要か要件を見直すことも重要

関連記事: フォームバリデーション完全ガイド / ラジオボタンの操作完全ガイド / 文字数をカウントする完全ガイド

よくある質問（FAQ）