2026年2月16日追記：本記事で紹介しているバリデーションとノーマライゼーション処理は、フォーム項目の標準機能として利用できるようになりました。詳細は、ニュースとマニュアルをご覧ください。
フォーム機能では、カスタムスクリプトを活用することで、独自のバリデーション（入力値のチェックやエラー表示）や、ノーマライゼーション（入力値の正規化）を導入できます。
今回は、カスタムスクリプトを使用した導入手順をご紹介します。
カスタムスクリプトで実現できること
今回ご紹介するカスタムスクリプトを活用することで、2つの処理が可能になります。
- 特定のドメインのメールアドレスの受付を制限する
- 全角で入力した郵便番号を半角に変換する
それでは、実際にやってみましょう！
カスタムスクリプト用テンプレートを作成する
まず、カスタムスクリプト用のテンプレートを作成します。今回は、インデックス・テンプレートとして作成し、出力ファイル名を custom-script.js に設定しています。
window.MTNetFormDataLayer = window.MTNetFormDataLayer || [];
function MTNetForm() { MTNetFormDataLayer.push(arguments); }
MTNetForm("validator", [
{
id: "メールアドレス",
validator: function(value) {
if (/@example.com/.test(value)) {
return "上記メールアドレスのドメインは利用できません。";
}
}
}
]);
MTNetForm("normalizer", [{
id: "郵便番号",
normalizer: function(value) {
return value.replace(/[０-９]/g, function(s) {
return String.fromCharCode(s.charCodeAt(0) - 0xfee0);
});
}
}]);
カスタムスクリプトを埋め込む
フォームを設置しているページ（埋め込みコードを貼り付けているページ）のテンプレートに <script>要素を記述して、先ほど作成したカスタムスクリプトのURLを指定します。サンプルでは、<$mt:BlogURL$>を使用し、絶対URLで指定しています。
<script src="<$mt:BlogURL$>custom-script.js"></script>
以上で設定は完了です。続いて、スクリプトの処理内容について詳しく解説します。
カスタムスクリプトの解説
特定のドメインのメールアドレスの受付を制限する
スクリプトの前半部分では、バリデーターを利用し、「特定のドメインのメールアドレスの受付を制限する」制御を行っています。
MTNetForm("validator", [
{
id: "メールアドレス",
validator: function(value) {
if (/@example.com/.test(value)) {
return "上記メールアドレスのドメインは利用できません。";
}
}
}
]);
@example.com の部分を制限したいドメインに変更することで、エラーメッセージを表示し、特定のメールアドレスの入力を制限できます。 例えば、フリーメールの登録を制限したい、といったケースで活用できます。
全角で入力した郵便番号を半角に変換する
スクリプトの後半部分では、ノーマライザーを利用し、「全角で入力された郵便番号を送信時に半角に変換する」処理を行っています。
MTNetForm("normalizer", [{
id: "郵便番号",
normalizer: function(value) {
return value.replace(/[０-９]/g, function(s) {
return String.fromCharCode(s.charCodeAt(0) - 0xfee0);
});
}
}]);
この処理により、ユーザーが全角数字で入力しても、自動的に半角に変換されて送信されます。結果として、ユーザーごとの入力フォーマットのバラつきを未然に防ぐことができます。
このように、カスタムスクリプトを活用することで、入力データの形式や値を柔軟にコントロールできます。ぜひ、ご活用ください。
関連するマニュアル
