フォームの[確認]をクリックしたときに、フォームにある複数のフィールドの値が特定の条件を満たすときだけ、確認画面に進めるようにしたいと考えています。
このような場合、どのようにエラーチェックを実装すればよいでしょうか?
お世話になっております.
トヨクモの石川と申します.
フォームブリッジでは,JavaScriptを用いたカスタマイズをすることで独自のエラーチェック(Custom validator)を設定することができます.利用方法については下記のページをご確認ください.ご不明点等ございましたら,コメントにてご連絡頂ければと思います.
Custom validator の getMessage と validate のそれぞれの引数には何が設定されているのでしょうか?
また、1つのフィールドを単独でチェックする仕様のように見えるのですが、複数のフィールドの値を基にした計算結果がある条件を満たすときだけ次に進めるといったチェックはできるのでしょうか?
お世話になっております.トヨクモの石川です.
具体的に,どのような検証を追加したいのか教えていただけますでしょうか.
あまりに複雑な場合はお答えできかねますが,単純な検証でしたら例としてお見せすることができます.
パーセンテージを入力する欄が複数あるフォームで、その合計が100になるときだけ確認画面に移れるようにしたいと考えています。
急を要する状況なので、早めに回答をいただければと思います。
複数の数値フィールドが存在し,それらの和が100の場合のみ投稿を許可したいということでよろしいでしょうか.
実装方法を2つご提案させていただきます.1つめのほうが,プログラムの構造を理解するのは簡単かと思います.
※全てのブラウザで動作確認を行っておりません.ご利用前に,ご自身で確認をして頂ますよう,お願いします.
※GoogleChromeでのみ動作確認をしております.
□1つめ:
対象の数値フィールドの合計を計算する数値計算フィールドを用意(これは編集不可にしておく)し,このフィールドに対して独自の検証を追加します.
(function () {
'use strict';
fb.events.form.created.push(function (state) {
state.fields.find(field => field.code === 'calc').validations.push({ // 'calc'には,対象となる数値計算フィールドのフィールドコードが入ります
params: [],
rule: 'calc_validation'
});
return state;
});
fb.addValidators = function (state) {
return {
calc_validation: {
getMessage: function (fieldCode, params) {
return '合計が100%である必要があります.';
},
validate: function (value, params) {
return value === 100;
}
}
};
};
})();
□2つめ
複数のフィールドを組み合わせた独自の検証を加えるという方法です.対象のフィールドが2つある場合を書かせていただきます.
(function () {
'use strict';
const targetFields = ['number', 'number_1']; // 計算対象のフィールドらのフィールドコードを格納した配列
fb.events.form.created.push(function (state) {
targetFields.forEach(targetField => {
state.fields.find(field => field.code === targetField).validations.push({
params: [],
rule: 'num_validation'
});
});
return state;
});
fb.addValidators = function (state) {
return {
num_validation: {
getMessage: function (fieldCode, params) {
return '合計が100%である必要があります.';
},
validate: function (value, params) {
var sum = 0;
targetFields.forEach(targetField => sum += state.record[targetField].value);
return sum === 100;
}
}
};
};
})();
ありがとうございました。
参考にさせていただきます。
このトピックはベストアンサーに選ばれた返信から 3 日が経過したので自動的にクローズされました。新たに返信することはできません。