フォームのカスタムスクリプト(ノーマライゼーション処理の仕様)
フォーム機能では値の制御をJavaScriptで行えます。
カスタムスクリプトでノーマライゼーション処理を利用すると、具体的には以下のようなことが可能になります。
- 郵便番号の入力が全角でも半角でも、送信時には半角にして受け付ける。
以下のスクリプトでは、ノーマライゼーション処理を利用し「郵便番号の入力が全角でも半角でも、送信時には半角にして受け付ける」制御を行っています。
window.MTNetFormDataLayer = window.MTNetFormDataLayer || [];
function MTNetForm() { MTNetFormDataLayer.push(arguments); }
MTNetForm("normalizer", [{
id: "郵便番号",
normalizer: function(value) {
return value.replace(/[0-9]/g, function(s) {
return String.fromCharCode(s.charCodeAt(0) - 0xfee0);
});
}
}]);
全角で入力した郵便番号を半角に変換する
郵便番号の入力が閲覧者によって全角になったり半角になったりとバラバラになるケースがあります。
上記スクリプトの後半では、入力した郵便番号に対して必ず半角に変換して送信されるようにしています。
![]()
- 渡されたオブジェクトにid(項目名かフィールドのID)が含まれる場合は、そのフィールドの値のみをノーマライザ関数に渡します。ノーマライザ関数はノーマライズした値を返すようにします。
- 項目名の同じフィールドが複数ある場合に、項目名で指定した場合、いずれかのフィールド一つが対象になります(どのフィールドが対象になるかは不定です)。
オブジェクトにidがない場合は、下記のフィールドの値をそれぞれノーマライザ関数に渡します。対象となるフィールドは、今後の実装によって追加されるかもしれないので、すべてのフィールドに適用されても問題ないものだけにしてください。
- お名前
- 1行テキスト
- 複数行テキスト
「お名前」「1行テキスト」「複数行テキスト」の値の全角文字を半角文字に変更する
window.MTNetFormDataLayer = window.MTNetFormDataLayer || [];
function MTNetForm() { MTNetFormDataLayer.push(arguments); }
MTNetForm("normalizer", {
normalizer: function(value) {
return value.replace(/[A-Za-z0-9]/g, function(s) {
return String.fromCharCode(s.charCodeAt(0) - 0xfee0);
});
}
});
英数字にくわえて、ハイフンを半角にするには以下を利用します。
window.MTNetFormDataLayer = window.MTNetFormDataLayer || [];
function MTNetForm() { MTNetFormDataLayer.push(arguments); }
MTNetForm("normalizer", {
normalizer: function(value) {
return value
.replace(/[A-Za-z0-9]/g, function (s) {
return String.fromCharCode(s.charCodeAt(0) - 0xfee0);
})
.replace(/[--﹣−‐⁃‑‒–—﹘―⎯⏤˗➖₋ーー__‾¯ˉ ̄ˍ─━╴╶╸╺▁▂▃▄▅▆▇█▔▬一⼀㆒]/g, "-");
},
});
非同期処理
ノーマライザ関数内で非同期処理をしたい場合は、返す値を thenable ( https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Promise/resolve )にします。ノーマライゼーション処理は、thenableがresolveされるのを待って次のノーマライザに実行に移るようになります。
(jQuery($) は別途ロードする必要があります)
MTNetForm("normalizer", {
normalizer: function(value) {
var dfd = $.Deferred();
setTimeout(function(){
dfd.resolve(value.toLowerCase());
}, 1000);
return dfd;
}
});