背景・実現したいこと
フォームブリッジにて、メールアドレス入力欄を設置しますが、入力できるメールアドレスのドメインを制限したいです。
指定したドメイン以外のメールアドレスが入力された場合、エラーとなるようにしたいです。
初心者のため、これができるのかどうかも分かりませんが、ご教示いただければ幸いです。
NKIさん
こんにちは。
JavaScriptであれば可能です。
先日、似たような質問に回答しましたので、そちらご案内します。
この電話番号の文字列判定部分を変更してみてください。
ご不明点ありましたら、ご返信ください。
koichi様
こんにちは。
コメントありがとうございます。
リンクいただいたページを参考に、やってみました。
ドメイン指定部分の正規表現の書き方に迷いましたが、無事できました。
※正規表現も初心者のため
ありがとうございました。
(function() {
‘use strict’;
fb.addValidators = function(state) {
return {
regex_validation: {
// エラーメッセージ内容
getMessage: function(fieldCode, params) {
return ‘指定ドメインのメールアドレスを入力してください。’;
},
// エラー判定条件
validate: function(value, params) {
if (value.match(/@formbridge.com$/)) {
// 問題なし
return true;
} else {
// 違うとき
return false;
}
}
}
}
};
fb.events.form.created = [function(state) {
// 全フィールドからエラーを出したいフィールドを検索
state.fields.filter(function(field) {
// エラーを出したいフィールド
return field.code === ‘メールアドレス’;
})[0].validations.push({
params: [],
rule: ‘regex_validation’ // fb.addValidatorsで定義した中から適用したいバリデーション名
});
return state;
}];
})();
koichi様
無事解決！と投稿しましたが、追加で質問させてください。
エラーを出したいフィールドが２つ以上ある場合、どうなるでしょうか？
下記のように書いてみましたが、最初のAの分のみ反応がありました。
// エラーを出したいフィールド
return field.code === ‘メールアドレスA’;
return field.code === ‘メールアドレスB’;
2つある場合は、それぞれに対して.validations.pushしないといけません。
繰り返し処理を使えば、もう少し汎用性の高い書き方もできますが、ひとまず2つ並べた形です。
fb.events.form.created = [function(state) {
// 全フィールドからエラーを出したいフィールドを検索
state.fields.filter(function(field) {
// エラーを出したいフィールド
return field.code === 'メールアドレスA';
})[0].validations.push({
params: [],
rule: 'regex_validation' // fb.addValidatorsで定義した中から適用したいバリデーション名
});
// 全フィールドからエラーを出したいフィールドを検索
state.fields.filter(function(field) {
// エラーを出したいフィールド
return field.code === 'メールアドレスB';
})[0].validations.push({
params: [],
rule: 'regex_validation' // fb.addValidatorsで定義した中から適用したいバリデーション名
});
return state;
}];
koichi様
何度もありがとうございます。
メールアドレスAもBも設定ができました。
繰り返し処理という書き方もあるのですね。そちらも勉強してみます。
いつもありがとうございます。
記載された内容と同じことを実現したく、上記のスクリプトを利用させていただきました。
ただ、こちらの環境だと、メールアドレス欄のドメインチェックは正常に動作しているように
見えるものの、この内容で登録しようとすると、正常に登録されず、次画面に遷移しませんでした。
挙動としては、これを設定したメールアドレス欄に入力エラーがあるかのように、
その欄の位置に自動でスクロールされるのですが、エラーメッセージ自体は表示されていません。
もし同じ挙動で発生し、解決された方がいれば、解決策をご教示いただけるとありがたいです。
Tessaiさん
こんにちは。
非表示にしているフィールドはありませんか？
挙動的に非表示フィールドにエラーが出ているような気がします。
koichi様
ご指摘の通り、非表示フィールドがいくつかあります。
それらをいったん解除してみて、挙動を再確認してみます。
ご指摘、たいへんありがとうございます。
koichi様
非表示フィールドをすべて表示状態にして検証しましたが、
エラーが表示されている項目はやはりないのに、項目エラーの挙動で
上にスクロールしました。スクロールした場所が、項目のある位置よりも上のようですので、
別の原因かもしれません。このフォームには他に４つのJavascriptをセットしているので、
それらのいずれかとの干渉が原因なのかもしれません。
このトピックはベストアンサーに選ばれた返信から 3 日が経過したので自動的にクローズされました。新たに返信することはできません。