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

**URL:** <https://community.cybozu.dev/t/topic/9531>\
**Category:** kintone 開発相談\
**Created:** [2024 年 9 月 20 日午前 2:52 UTC](https://community.cybozu.dev/t/topic/9531 "2024-09-20T02:52:14Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![kohei.sakai](https://avatars.discourse-cdn.com/v4/letter/k/34f0e0/32.png) [@kohei.sakai](https://community.cybozu.dev/u/kohei.sakai)\
**Post date:** [2024 年 9 月 20 日午前 2:52 UTC](https://community.cybozu.dev/t/topic/9531/1 "2024-09-20T02:52:14Z")

</div>

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

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

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

```javascript
(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を返す
        }
      }
    };
  };
})();

```

---

<div class="post-metadata">

**Author:** ![aaa](https://sea1.discourse-cdn.com/flex015/user_avatar/community.cybozu.dev/aaa/32/277_2.png) [@aaa](https://community.cybozu.dev/u/aaa)\
**Post date:** [2024 年 9 月 24 日午前 7:47 UTC](https://community.cybozu.dev/t/topic/9531/2 "2024-09-24T07:47:17Z")

</div>

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

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

```

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

条件分岐初期状態  
 ![image](https://us1.discourse-cdn.com/flex015/uploads/cybozu/original/2X/7/79e98060807c5f9e16a428498cec1f8810ef7cca.png)  
チェックボックスCにチェックで日付欄を出力  
 ![image](https://us1.discourse-cdn.com/flex015/uploads/cybozu/original/2X/b/b47c2c9767073562227ac65f0450bf2762c6ab0f.png)  
date1に未来の日付でエラーになる。  
 ![image](https://us1.discourse-cdn.com/flex015/uploads/cybozu/original/2X/c/c0fb80978aec1b96c15220eb6d9098752420f697.png)

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

再現コード

```javascript
(() => {
    // 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を返す
            }
        }
    });
})();

```

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex015/uploads/cybozu/original/1X/d5c841c3c5a6cb66eed514001c1b45147c9e1f4f.png) [@system](https://community.cybozu.dev/u/system)\
**Post date:** [2024 年 9 月 27 日午前 7:47 UTC](https://community.cybozu.dev/t/topic/9531/3 "2024-09-27T07:47:20Z")

</div>

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