選択項目の制御について

お世話になります。

フォームブリッジの選択項目で、対象となる項目が定員に達した場合、
選択すると、赤文字で「定員に達しました」などと表示することを想定しております。
非表示用に同じフィールドを準備して、対象項目が無かった場合に
JavaScriptでエラーメッセージまたは選択不可にすることは可能でしょうか。

下記の条件で表示することを想定しております。

■ドロップダウンの場合
【表示用】入力フォームに表示します
フィールドタイプ:ドロップダウン
フィールドコード:kosu1
フィールド名:希望コース
選択肢:Aコース、Bコース、Cコース

【非表示用】入力フォームに表示されない
フィールドタイプ:ドロップダウン
フィールドコード:kosu2
フィールド名:希望コース
選択肢:Aコース、Cコース
※非表示用にBコースが無いので、表示用でBコースを選択した場合、
** エラーまたは選択不可としたい。**

■チェックボックスの場合
【表示用】入力フォームに表示します
フィールドタイプ:チェックボックス
フィールドコード:kosu3
フィールド名:大会
選択肢:Aコース、Bコース、Cコース

【非表示用】入力フォームに表示されない
フィールドタイプ:チェックボックス
フィールドコード:kosu4
フィールド名:大会
選択肢:Bコース、Cコース
※非表示用にAコースが無いので、表示用でBコースを選択した場合、
** エラーまたは選択不可としたい。**

よろしくお願い致します。

takkoboy様

お世話になっております。
トヨクモの江田と申します。

下記コードで実装できるかと思います.
(非表示用フィールドは用意しなくても問題ありません.)
4行目と7行目の数字については,下記などを参考に適切な値を入力してください.
https://developer.cybozu.io/hc/ja/community/posts/360054756071

(function() {
  "use strict";
  fb.events.form.created.push(function (state) {
    state.fields[0].validations.push({ //「0」の部分は実際のフォームに合わせて適切な数字に変更してください.
      rule: 'custom_validation1'
    });
    state.fields[1].validations.push({ //「1」の部分は実際のフォームに合わせて適切な数字に変更してください.
      rule: 'custom_validation2'
    });
    return state;
  });

  fb.addValidators = function () {
    return {
      custom_validation1: {
        getMessage: function () {
          return '選択できません.';
        },
        validate: function (value) {
          return value !== 'Bコース';
        }
      },
      custom_validation2: {
        getMessage: function () {
          return '選択できません.';
        },
        validate: function (value) {
          return value.indexOf('Aコース') === -1;
        }
      }
    };
  };
})();

また,人数が上限に達した際に自動で締め切りをするサンプルも紹介しているので,よろしければご覧ください.<br> https://developer.cybozu.io/hc/ja/articles/360033455531

トヨクモ 江田様

サンプルのご提供ありがとうございます。

実際に提供頂いたサンプルをそのままテストして
みました。
しかし、対象コースが選択可能となっております。

素人で理解していない点があるかと思いますが、
対処法を教えて頂ければと思います。

takkoboy様

お世話になっております。

上述したコードは,フォームの1つ目のフィールドが「ドロップダウン」,2つ目のフィールドが「チェックボックス」であることを想定して記述しています.
実際のフォームが違う構造となっている場合は,4行目と7行目の数字を調整してください.

もし動作しない場合は,ブラウザのデバッグ機能を利用してエラーメッセージを確認してみてください.
下記などが参考になるかと思います.
https://developer.cybozu.io/hc/ja/articles/207613916

トヨクモ 江田様

お世話になっております。

再度、設定を確認したところ、他のjsが邪魔していたようです。

問題なく動作しました。

ありがとうございました。

このトピックはベストアンサーに選ばれた返信から 3 日が経過したので自動的にクローズされました。新たに返信することはできません。