新規投稿
フォローする

フォームブリッジのチェックボックスの選択数の制御について

お世話になります。押川と申します。

フォームブリッジでアンケート調査用のフォームを作成しています。

回答の選択肢をチェックボックスを使っていますが、設問によっては、「3つまで選んでください」や「3つ以内で選んでください」、「3つ以上選んでください」等が想定されます。

設問ごとにチェックボックスの数をチェックし、条件にあてはまらない場合、メッセージを表示する等で正確な回答数を取り込めるようにしたいと考えています。実現できる方法を教えてください。

kintoneもフォームブリッジもjavascriptも初心者ですが、どうぞよろしくお願いします。

0

6件のコメント

Avatar
瀧ヶ平

押川さん
cstapの瀧ヶ平です

カスタムバリデーションを実装することで可能かと思います。
state.record.<チェックボックスのフィールドコード>.value.lengthが指定個数より大きいかを判定するようなバリデーションを実装すると良いです


(function () {
  'use strict';

  fb.events.form.created.push(function (state) {
    state.fields.find(({code}) => code === "フィールドコード1").validations.push({
      params: [3, "<"], // 選択数を3個未満にする場合
      rule: 'checkbox_validation'
    });
state.fields.find(({code}) => code === "フィールドコード2").validations.push({
params: [3, ">"], // 選択数を3個より多くする場合
rule: 'checkbox_validation'
}); return state; }); fb.addValidators = function (state) { return { checkbox_validation: { getMessage: function (fieldCode, [count, operator]) { switch(operator) {
case "<":
return `選択している数を${count}個未満にしてください`
case ">":
return `選択している数を${count}個より多くしてください`
} }, validate: function (value, [count, operator]) { switch(operator) {
case "<":
return value.length < count;
case ">":
return value.length > count;
} } } }; }; })();

3個未満、3個より多いの場合は以上のようなコードで実装できるかと思います

参考になれば幸いです

0
Avatar
押川 裕也

瀧ヶ平 様

ご連絡ありがとうございます。

実装できるよう挑戦します。kintoneのカスタマイズは少しだけ勉強しましたが、フォームブリッジは触るのもはじめで時間がかかると思いますが、がんばってみます。

"フィールドコード1"、 "フィールドコード2"のところにフォームブリッジのチェックボックスのフィールドコードを
書き換えるという理解でよろしいでしょうか。

 

0
Avatar
押川 裕也

瀧ヶ平 様

お世話になっております。押川です。

cstapのフォームブリッジカスタマイズのページに記載されているコードと見比べると

よりよく理解できました。ありがとうございます。無事に実装できました。

追加で教えて頂きたいのですが、3個未満にするフィールドが、複数ある場合の記述方法を教えてください。

よろしくお願いします。

0
Avatar
押川 裕也

お世話になっております。押川です。

複数ある場合、下記のように記述しています。動作に問題はありませんが、数が多くなると少々面倒なことになりそうです。

よい記述方法があればご教示ください。

(function () {
'use strict';

fb.events.form.created.push(function (state) {
state.fields.find(({code}) => code === "問6").validations.push({
params: [3, "<="], // 選択数を3個以下にする場合
rule: 'checkbox_validation'
});

state.fields.find(({code}) => code === "問8").validations.push({
params: [3, "<="], // 選択数を3個より多くする場合
rule: 'checkbox_validation'
});

state.fields.find(({code}) => code === "問10").validations.push({
params: [2, "<="], // 選択数を2個以下にする場合
rule: 'checkbox_validation'
});

state.fields.find(({code}) => code === "問18").validations.push({
params: [3, "<="], // 選択数を3個より多くする場合
rule: 'checkbox_validation'
});
return state;
});

fb.addValidators = function (state) {
return {
checkbox_validation: {
getMessage: function (fieldCode, [count, operator]) {
switch(operator) {
case "<=":
return `選択している数を${count}個以内にしてください`
case ">":
return `選択している数を${count}個より多くしてください`
}
},
validate: function (value, [count, operator]) {
switch(operator) {
case "<=":
return value.length <= count;
case ">":
return value.length > count;
}
}
}
};
};
})();
0
Avatar
瀧ヶ平

押川さん

複数のパターンの場合には設定を各オブジェクトで表現し、それを元にイテレーションしてバリデーションを設定すると良いです。

例えば

let config = {
  "fieldCode1": {
    count: 4,
    operator: "<"
  },
  "fieldCode2": {
    count: 1,
    operator: "<="
  },
  "fieldCode3": {
    count: 2,
    operator: "<="
  }
};
fb.events.form.created.push(function (state) {
  Object.keys(config).forEach(fieldCode => {
    let {count, operator} = config[fieldCode];
    state.fields[fieldCode].valudations.push({
      params: [count, operator],
      validator: "checkbox_validation"
    });
  })
});
/**
* 略
*/

のようにする方法があります。

0
Avatar
押川 裕也

瀧ヶ平 様

ご連絡ありがとうございます。

複数のパターン、すっきりしていいですね。早速試してみます。

チェックボックスの選択数はアンケート調査では、よくあることなのでフォームブリッジの標準機能になると、いいですね。

今後ともよろしくお願いします。

 

0
ログインしてコメントを残してください。