マニュアル

フォームのカスタムスクリプト(バリデーション処理の仕様)

フォーム機能では値の制御をJavaScriptで行えます。

カスタムスクリプトでバリデーション処理を利用すると、具体的には以下のようなことが可能になります。

  • 特定のドメインのメールアドレスの受付を制限する。

以下のスクリプトでは、バリデーション処理を利用し「特定のドメインのメールアドレスの受付を制限する」制御を行っています。

window.MTNetFormDataLayer = window.MTNetFormDataLayer || [];
function MTNetForm() { MTNetFormDataLayer.push(arguments); }
MTNetForm("validator", [
{
id: "メールアドレス",
validator: function(value) {
if (/@example.com/.test(value)) {
return "このドメインのメールアドレスは利用できません。";
}
}
}
]);

特定のドメインのメールアドレスの受付を制限する

例えば企業のメールアドレスしか登録させないようにしたい(フリーのメールアドレスを登録させたくない)、というケースがあります。

その場合は、@example.comの部分を制限したいドメインに変更することによって以下のようにエラーメッセージを表示させることができます。

フォームのカスタムスクリプト(バリデーション処理の仕様)

  • 渡されたオブジェクトにid(項目名かフィールドのID)が含まれる場合は、そのフィールドの値のみをバリデータに渡します。
  • 項目名の同じフィールドが複数ある場合に項目名で指定した場合、いずれかのフィールド一つが対象になります(どのフィールドが対象になるかは不定です)。
  • バリデートをエラーで返す場合は、エラーメッセージをstringで返します。エラーとしない場合は何も返さないでください。

オブジェクトにidがない場合は、そのバリデーションにはすべてのフィールドの値を下記のフォーマットで渡します。

{
  id: フィールドのID,
  label: フィールドの項目名,
  value: フィールドの値,
  type: フィールドのタイプ(text, textarea, select-one, checkbox, radio, zip, tel, email, url, hidden)
}
MTNetForm("validator", {
  validator: function(data) {
    for (var d of data) {
      if (/[A-Za-z0-9]/.test(d.value)) {
        return {
          id: d.id,
          message: "全角文字は利用できません"
        };
      }
    }
  }
});

この場合にバリデートでエラーとするときは、下記のフォーマットのオブジェクトを渡します。正しいフォーマットで渡さないと、エラー扱いになりますが、エラーメッセージはフィールドに表示されません。

{
  id: フィールドのID,
  message: エラーメッセージ
}

非同期処理

バリデータ関数内で非同期処理をしたい場合は、返す値を thenable にします。

MTNetForm("validator", {
  id: "お名前",
  validator: function(value) {
    var dfd = $.Deferred();
    setTimeout(function() {
      if (value === "test") {
        dfd.resolve("Invalid Value");
      } else {
        dfd.resolve();
      }
    }, 100);
    return dfd.promise();
  }
});

バリデーションサンプル

入力フォームに半角英数のみ入力させる

1行テキストなどで半角英数のみ入力させたい場合の例。
※ idは項目のIDを指定します。
※ 半角英数字以外の記号(@など)も許可したい場合は ^[a-zA-Z0-9]+$^[ -~]+$ に変更してください。

window.MTNetFormDataLayer = window.MTNetFormDataLayer || [];
function MTNetForm() { MTNetFormDataLayer.push(arguments); }
MTNetForm("validator", [
{
id: "項目のIDを指定",
  validator: function(value) {
      if (!/^[a-zA-Z0-9]+$/.test(value)) {
        return "半角英数字で入力してください。";
    }
  }
}
]);