【新バージョン Formbridge】非表示にしたフィールドの必須条件を解除したい

kintone カスタマイズ
1

皆様、お世話になっております。
FormBridgeが新バージョンに切り替わりJavascriptのやり方が変更されましたので、
お力をお借りしたく投稿させていただきました。

現在、FormBridgeを使用してオプション追加のフォームを作成しています。
フォーム上で使用しているフィールド情報を下記に記載致します。
・年齢（ 文字列(1行)の設定） ※フィールド名：age ※必須条件
・性別（ ラジオボタンの設定） ※フィールド名：gender ※必須条件
・項目選択A（ チェックボックスの設定）※フィールド名：MY ※必須条件
・項目選択B（ チェックボックスの設定）※フィールド名：MS ※必須条件
・項目選択C（ チェックボックスの設定）※フィールド名：FY ※必須条件
・項目選択D（ チェックボックスの設定）※フィールド名：FS ※必須条件

上記のフィールドをフォームに設定しています。

年齢の値と性別の値によって、選択項目A～Dを表示/非表示にしています。
ただ、非表示になったフィールドの必須条件が解除されていない為、
回答ボタンを押しても回答ができません。

そこで、非表示にしたフィールドの必須条件を解除するやり方や追加した方が良いコードがあればご教授いただきたいです。

実行したコードを下記に記載します。

//ーーー"男"か"女"の選択で年齢を確認し、表示・非表示にする設問の条件分岐ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
  formBridge.events.on('form.field.change.gender', function (context) {
    const maleMY = document.querySelector('.fb-custom--field[data-field-code="MY"]');  // 希望する検査項目を選択してください (MY)
    const maleMS = document.querySelector('.fb-custom--field[data-field-code="MS"]');  // 希望する検査項目を選択してください (MS)
    const girlFY = document.querySelector('.fb-custom--field[data-field-code="FY"]');  // 希望する検査項目を選択してください (FY)
    const girlFS = document.querySelector('.fb-custom--field[data-field-code="FS"]');  // 希望する検査項目を選択してください (FS)
    
    // 男性の条件分岐
    if (context.value === "男") {

      // 年齢が３５歳又は４０歳以上だったら"MS"を表示、それ以外は"MY"を表示する
      if (context.getRecord().age.value == 35 || context.getRecord().age.value >= 40) {

        maleMY.style.display = 'none';            // MYを非表示
        maleMS.style.display = 'block';           // MSを表示

        maleMY.required = false;    // MYの必須条件を解除
        maleMS.required = true;     // MSを必須に設定


      } else {

        maleMY.style.display = 'block';           // MYを表示
        maleMS.style.display = 'none';            // MSを非表示

        maleMY.required = true;    // MYを必須に設定
        maleMS.required = false;   // MSの必須条件を解除

      }
      
    // 女性の条件分岐  
    }else if (context.value === "女"){
      
      // 年齢が３５歳又は４０歳以上だったら"FS"を表示、それ以外は"FY"を表示する
      if (context.getRecord().age.value == 35 || context.getRecord().age.value >= 40) {

        girlFY.style.display = 'none';            // FYを非表示
        girlFS.style.display = 'block';           // FSを表示

        girlFY.required = false;    // FYの必須条件を解除
        girlFS.required = true;     // FSを必須に設定

      } else {

        girlFY.style.display = 'block';           // FYを表示
        girlFS.style.display = 'none';            // FSを非表示

        girlFY.required = true;    // FYを必須に設定
        girlFS.required = false;   // FSの必須条件を解除

      }
    }

  });

上記で作成したコードになります。
必須条件解除として、「.required」を使用しましたが、
私のやり方が下手なのか上手くいきませんでした。

皆様、お忙しいところ申し訳ありませんが、ご教授頂けると幸いです。

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

2

FormBridge についてあまり詳しくないので、もしかしたらもっと良いやり方があるかもしれませんが……

フォーム設定で必須にしてあるフィールドは、登録前に値が入力されているかどうか FormBridge 側でチェックが入ると思うので、カスタマイズで無理やり任意入力にするのは難しいと思います。

設定上は必須ではない状態にしておいて、保存時にカスタマイズで入力されているかどうかチェックする方法に変えてみてはいかがでしょうか。

その場合であれば バリデーション として実装できる気がします。

「いいね！」 1
3

wv-sumichanさん
ご教授ありがとうございます。

確かに、フォーム設定で必須にしてあるフィールドは登録前に値が入力されているかどうか チェックが入っていました。

ご教授いただいたように、一度設定上の必須を外して、保存時に値が入力されているかどうかチェックする方法に切り替えてみたいと思います。

また、分からない点が出てきた場合は再度ご相談させてください。

宜しくお願い致します。

「いいね！」 1