Snow Monkey Forms│メールアドレスのダブルチェック確認の実装方法

2024.05.242026.10.04

ブロックエディタで作成できるSnow Monkey Forms。

メールアドレスを2回入力してもらい、入力の食い違いに気づけるようにする方法です。

そこでJavaScriptを使って実装してみましたので本記事でも紹介いたします。

Snow Monkey Formsでメールアドレスのダブルチェック確認を実装する例。

Snow Monkey Forms の設定・カスタマイズ方法はこちらにまとめています。

Snow Monkey Formsのメールアドレスのダブルチェック確認の実装方法

JavaScriptで入力中の不一致を知らせ、PHPで確認・送信時の2欄の一致を検査します。メールの到達や所有確認は別途必要です。

お問い合わせフォームの作成

まずは事前準備です。

NAME属性の設定

2つのメールアドレスの項目を作成。

入力欄のNAME属性に名前をつけておきます。

	NAME属性
Eメール	email
Eメール（確認用）	confirm-email

IDの確認

検証から対象のお問い合わせフォームのIDを調べておきましょう。

snow-monkey-form-115

ダブルチェック確認のコードを追加

以下を対象ページで読み込むJavaScriptファイルへ1回だけ追加してください。子テーマから読み込む場合は wp_enqueue_script を使います。両方のメール欄を必須のメール型に設定し、確認用欄のNAMEを confirm-email にしてください。

先ほどメモしたフォームのIDも変更しておきます。

const form = document.getElementById('snow-monkey-form-115');

(() => {
  const formId = 'snow-monkey-form-115'; // 対象フォームのIDへ変更
  const inspect = (form, showEmpty = false) => {
    const first = form.querySelector('input[name="email"]');
    const second = form.querySelector('input[name="confirm-email"]');
    if (!first || !second) return null;
    let message = form.querySelector('.waza-email-match-error');
    if (!message) {
      message = document.createElement('p');
      message.className = 'waza-email-match-error';
      message.id = formId + '-email-match-error';
      message.setAttribute('aria-live', 'polite');
      second.insertAdjacentElement('afterend', message);
      const ids = new Set((second.getAttribute('aria-describedby') || '').split(/\s+/).filter(Boolean));
      ids.add(message.id);
      second.setAttribute('aria-describedby', [...ids].join(' '));
    }
    const mismatch = first.value !== second.value;
    message.textContent = mismatch && (showEmpty || second.value !== '')
      ? 'メールアドレスが一致しません。2つの入力欄を確認してください。' : '';
    return { mismatch, second };
  };
  ['input', 'change'].forEach(type => document.addEventListener(type, event => {
    const target = event.target;
    if (!(target instanceof HTMLInputElement)) return;
    const form = target.form;
    if (form && form.id === formId && ['email', 'confirm-email'].includes(target.name)) inspect(form);
  }));
  document.addEventListener('submit', event => {
    const form = event.target;
    if (!(form instanceof HTMLFormElement) || form.id !== formId) return;
    if (event.submitter?.getAttribute('data-action') === 'back') return;
    const result = inspect(form, true);
    if (result?.mismatch) {
      event.preventDefault();
      event.stopImmediatePropagation();
      result.second.focus();
    }
  }, true);
})();

エラー文の位置調整

見た目も少し調整します。

.waza-email-match-error { color: #a30000; margin: .5em 0; }

確認

2つのメールアドレスの入力欄に異なる情報を入れるとエラーが発生します。

2つのメールアドレス入力欄に異なる内容を入力した際にエラーが表示され、送信できない状態。

両メール欄の変更を監視し、不一致で確認・送信操作をすると確認用欄へフォーカスを移します。

確認・送信時にPHPでも一致を検査する

JavaScriptだけでは、直接リクエストによる不一致を防げません。以下を子テーマのfunctions.phpのPHP内、またはCode SnippetsのPHPスニペットへ追加します。

フォームIDの115をJavaScript側と同じ対象フォームIDへ変更し、2欄のNAMEをemail・confirm-emailに揃えます。両欄の必須・メール型設定はSMF側でも有効にしてください。

add_filter( 'snow_monkey_forms/spam/validate', function ( $valid, $responser, $setting ) {
    // 既存のスパム判定を維持します。
    if ( is_wp_error( $valid ) || ! $valid ) {
        return $valid;
    }
    if ( 115 !== (int) $setting->get( 'form_id' ) ) { // 対象フォームIDへ変更
        return $valid;
    }
    $method = \Snow_Monkey\Plugin\Forms\App\Model\Meta::get_method();
    if ( ! in_array( $method, array( 'confirm', 'complete' ), true ) ) {
        return $valid;
    }
    $email = $responser->get( 'email' );
    $confirm = $responser->get( 'confirm-email' );
    if ( ! is_string( $email ) || ! is_string( $confirm ) ||
        '' === $email || '' === $confirm || $email !== $confirm ) {
        return new WP_Error( 'waza_email_mismatch',
            'メールアドレスが一致しません。ページを再読み込みして、2つの入力欄を確認してください。' );
    }
    return $valid;
}, 20, 3 );

確認・送信時に2欄が一致しなければ、SMFのspam/validateフックからWP_Errorを返してメール処理の前に止めます。既存のスパム判定がfalseやWP_Errorなら、その判定を維持します。

このサーバー検査で不一致になった場合は、SMFのシステムエラー画面になります。画面の指示どおりページを再読み込みし、入力し直してください。通常の入力画面では前述のJavaScriptが先に不一致を知らせます。戻る操作と他フォームはこの一致検査の対象外です。

通常のCSRF処理を使った実HTTP通信でも、追加JavaScriptを読み込まない検証フォームの不一致をPHP側で拒否できました。

戻す場合は、このadd_filter全体をCode Snippetsで無効化するか子テーマから取り除き、キャッシュを消します。JavaScriptとSMF側の必須設定は別に管理します。