マニュアル

メールアドレスの同一チェック方法

メールアドレスの入力ミスなどを防ぐために、メールアドレスの入力項目を 2 つ用意し、両方が同一メールアドレスであることを確認してから送信する、というフォームは以下の手順で作成が可能です。

フォームを用意する

  1. フォームの「項目変更」タブを開く
  2. 「フォームの項目変更」画面で「メールアドレス」項目が 2 つになるよう追加する
  3. 「メールアドレス」項目の片方の編集ボタン(「∨」マーク)をクリックし、「項目名」を「メールアドレス(確認)」に変更して [完了] ボタンをクリックする

    メールアドレス(確認)」以外にする場合、後述のソースコードを変更する必要があります。

  4. 「メールアドレス」と「メールアドレス(確認)」の 2 つの項目を設定し [保存] ボタンをクリックする
  5. 「基本設定」タブから埋め込みコードをコピーし、フォームを公開したいページに貼り付ける

メールアドレスの同一チェックをする JavaScript を設置する

  1. テンプレート等を利用し、以下のソースコードを含む JavaScript ファイルを作成する

    「フォームを用意する」項目の手順 3 で項目名を「メールアドレス(確認)」以外に設定した場合、「else if (v.label === "メールアドレス(確認)")」箇所を、設定した項目名に変更してください。

  2. window.MTNetFormDataLayer = window.MTNetFormDataLayer || [];
    function MTNetForm() { MTNetFormDataLayer.push(arguments); }
    MTNetForm("validator", {
      validator: function(values) {
        var email, emailId, confirm, confirmId;
        values.forEach(function(v) {
          if (v.label === "メールアドレス") {
            email = v.value;
            emailId = v.id;
          } else if (v.label === "メールアドレス(確認)") {
            confirm = v.value;
            confirmId = v.id;
          }
        });
    
        if (email && confirm && email !== confirm) {
          return {
            id: [emailId, confirmId],
            message: "「メールアドレス(確認)」が一致していません。",
          };
        }
      },
    });
  3. フォームを設置したページ内、埋め込みコードの下に以下の Script タグを記述して、手順 1 で作成した JavaScript ファイルを読み込む
  4. <script src="https://***.movabletype.io/***.js(作成した JavaScript ファイルの URL)"
     defer async></script>

上記の設定を行うと「送信内容を確認する」ボタンをクリックした際にメールアドレスが同一かどうかのチェックを行います。
同一でない場合は「「メールアドレス(確認)」が一致していません。」のメッセージが表示されるようになります。