【FormBridge】条件分岐設定したフォームで、JavascriptカスタマイズのValidationが動作しない

[kohei.sakai (ksakai)]

・fieldCodeは条件分岐ではじめは表示されていないが、途中で表示される。
・changedイベントは上記が表示された後に実行される。
・changedの中のFunctionは実行されるが、Validation（custom_validation1）は実行されない。

※fieldCodeを条文分岐の対象にせず（項目をずっと表示）であれば、Validationもうまく実行される。（そのため基本的にコードに不備はないと考えます。）

→条件分岐で隠れている項目についても、Validationを適切に実行させるためには、どのようにコードを書き換えればよいでしょうか。

(function () {
  'use strict';
 // 対象のフィールドコードを設定
 var fieldCode = "date1";  

  // 判定が作動する条件となるフィールドコードを設定
  var checkField = "checkBox1";

  // 対象年月日の値が変更された時のイベントを追加
  fb.events.fields[fieldCode].changed.push(function (state) {
    state.fields.find(({code}) => code === fieldCode).validations = [];
    if(!(state.record(checkField).value.includes('A') || state.record(checkField).value.includes('B'))) {
      // Validateの規則を追加     
      state.fields.find(({code}) => code === fieldCode).validations.push({
          params: [],
          rule: 'custom_validation1'
      });
    }
    return state;  // 状態を返す
  });

  // checkFieldが変更された時のイベントを追加
  fb.events.fields[checkField].changed.push(function (state) {
    state.fields.find(({code}) => code === fieldCode).validations = [];
    if(!(state.record(checkBox1).includes('A') || state.record(checkBox1).value.includes('B'))) {
      // Validateの規則を追加     
      state.fields.find(({code}) => code === fieldCode).validations.push({
          params: [],
          rule: 'custom_validation1'
      });
    }
    return state;  // 状態を返す
  });

  fb.addValidators = function(state) {
    return {
      custom_validation1: {
        getMessage: function(fieldCode, params) {
          // 対象年月日が設定されているかチェック
          if (state.record[fieldCode] && state.record[fieldCode].value) {
            var today = new Date();  // 現在日付を取得
            today.setHours(0, 0, 0, 0);  // 時分秒を0にセット
            var formDate = new Date(state.record[fieldCode].value);  // フォーム上の対象年月日を取得
            formDate.setHours(0, 0, 0, 0);  // 時分秒を0にセット
            // 対象年月日が未来日かチェック
            if (formDate.getTime() > today.getTime()) {
              return '未来の日付は選択できません';  // エラーメッセージを返す
            }
          }
return '';  // エラーなしなら空文字を返す
        },
        validate:  function(value) {
          // 対象年月日が設定されているかチェック
          if (state.record[fieldCode] && state.record[fieldCode].value) {
            var today = new Date();  // 現在日付を取得
            today.setHours(0, 0, 0, 0);  // 時分秒を0にセット
            var formDate = new Date(state.record[fieldCode].value);  // フォーム上の対象年月日を取得
            formDate.setHours(0, 0, 0, 0);  // 時分秒を0にセット
            // 対象年月日が未来日かチェック
            if (formDate.getTime() > today.getTime()) {
              return false;  // 未来日であれば不正な値としてfalseを返す
            }
          }
          return true;  // それ以外は正しいとしてtrueを返す
        }
      }
    };
  };
})();

[aaa]

もしかしたら、意味があったのかもしれませんが、
changed イベント内で

state.fields.find(({code}) => code === fieldCode).validations = [];

があり、削除してみたところ動作しているようです。

条件分岐初期状態

チェックボックスCにチェックで日付欄を出力

date1に未来の日付でエラーになる。

今回試した範囲では
「条件分岐で見えていないものに対して、validationを設定できない」
ということはなさそうです。

再現コード

(() => {
    // validations対象のフィールドコードを設定
    const fieldCode = "date1";

    // 条件分岐判定が作動する条件となるフィールドコードを設定
    const checkField = "checkBox1";

    fb.events.fields[checkField].changed.push((state) => {
        // Validateの規則を追加     
        state.fields.find(({ code }) => code === fieldCode).validations.push({
            params: [],
            rule: 'custom_validation1'
        });
        return state;
    });

    fb.addValidators = (state) => ({
        custom_validation1: {
            getMessage: (fieldCode, params) => {
                return '未来の日付は選択できません';
            },
            validate: (value) => {
                // 対象年月日が設定されているかチェック
                if (state.record[fieldCode]?.value) {
                    const today = new Date();  // 現在日付を取得
                    today.setHours(0, 0, 0, 0);  // 時分秒を0にセット
                    const formDate = new Date(state.record[fieldCode].value);  // フォーム上の対象年月日を取得
                    formDate.setHours(0, 0, 0, 0);  // 時分秒を0にセット
                    // 対象年月日が未来日かチェック
                    if (formDate.getTime() > today.getTime()) {
                        return false;  // 未来日であれば不正な値としてfalseを返す
                    }
                }
                return true;  // それ以外は正しいとしてtrueを返す
            }
        }
    });
})();