Formbrigeでエラーメッセージを出したい

[seaflour]

Formbrigeで納品合計数が数量以上の場合はエラーメッセージを出したいです。
以下のようなコードを入れてみたんですが
Cannot read properties of undefined (reading ‘set’)
とエラーが出ています。
新しいバージョンのJSではどう記述すればいいでしょうか？
ご教授お願い致します。

(function() {
  'use strict';

  // FormBridgeが読み込まれているか確認
  if (typeof formBridge === 'undefined') {
    console.error('FormBridge is not loaded');
    return;
  }

  console.log('FormBridge custom script is running');

  // フィールド変更時のバリデーション
  formBridge.events.on('form.field.change.納品合計数', function(context) {
    validateDeliveryTotal(context);
  });

  // フォーム送信時のバリデーション
  formBridge.events.on('form.submit', function(context) {
    console.log('Form submit event triggered');
    validateDeliveryTotal(context);
  });

  function validateDeliveryTotal(context) {
    console.log('Validating delivery total');
    const 数量フィールドコード = '数量';
    const 納品合計数フィールドコード = '納品合計数';

    const record = context.getRecord();
    console.log('Current record:', record);

    const 納品合計数 = record[納品合計数フィールドコード].value;
    const 数量 = record[数量フィールドコード].value;

    console.log('納品合計数:', 納品合計数, '数量:', 数量);

    if (納品合計数 > 数量) {
      console.log('Error: 納品合計数 exceeds 数量');
      // エラーメッセージを設定 (フォーム送信をキャンセルしない)
      context.record.set(納品合計数フィールドコード, { error: '納品合計数は数量を超えています。' });
      context.cancelSubmit('納品合計数が数量を超えています。修正してください。');
    } else {
      console.log('Validation passed');
      // エラーメッセージをクリア
      context.record.set(納品合計数フィールドコード, { error: null });
    }
  }
})();

[marui]

context.record.set();
↓↓
値を設定するなら
context.setFieldValue(fieldCode, newValue);
エラーメッセージの設定なら
context.setFieldValueError(fieldCode, errorMessage);

ではないでしょうか。

https://formbridge.kintoneapp.com/help/customize/v2
form.field.change.(fieldCode)の部分ご確認ください。

[seaflour]

marui様
ご教示いただきありがとうございます！
頂いたヒントを基に修正したのですが
まだcontext.setFieldValueErrorとエラーが出てしまいます。
どこを修正すれば良いのでしょうか？

(function () {
  'use strict';

  // FormBridgeが読み込まれているか確認
  if (typeof formBridge === 'undefined') {
    console.error('FormBridge is not loaded');
    return;
  }

  console.log('FormBridge custom script is running');

  // フィールドコードを定義
  const 数量フィールドコード = '数量';
  const 納品合計数フィールドコード = '納品合計数';

  // フィールド変更時のバリデーション
  formBridge.events.on(
    'form.field.change.' + 納品合計数フィールドコード,
    function (context) {
      validateDeliveryTotal(context);
    }
  );

  // フォーム送信時のバリデーション
  formBridge.events.on('form.submit', function (context) {
    console.log('Form submit event triggered');
    validateDeliveryTotal(context);
  });

  function validateDeliveryTotal(context) {
    console.log('Validating delivery total');

    const record = context.getRecord();
    console.log('Current record:', record);

    const 納品合計数 = record[納品合計数フィールドコード].value;
    const 数量 = record[数量フィールドコード].value;

    console.log('納品合計数:', 納品合計数, '数量:', 数量);

    if (納品合計数 > 数量) {
      console.log('Error: 納品合計数 exceeds 数量');
      // エラーメッセージを設定
      context.setFieldValueError(
        納品合計数フィールドコード,
        '納品合計数は数量を超えています。'
      );
      context.cancelSubmit(
        '納品合計数が数量を超えています。修正してください。'
      );
    } else {
      console.log('Validation passed');
      // エラーメッセージをクリア
      context.setFieldValueError(納品合計数フィールドコード, null);
    }
  }
})();

[marui]

https://formbridge.kintoneapp.com/help/customize/v2

以下、リファレンス内のsampleコード転記いたします。

formBridge.events.on('form.field.change.company_name', function (context) {
  const companyName = context.value;
  const personalName = context.getRecord().personal_name.value;

  if (companyName !== '' && personalName !== '') {
    context.setFieldValueError('company_name', '法人名と個人名の両方を入力することはできません。');
    context.setFieldValueError('personal_name', '法人名と個人名の両方を入力することはできません。');
  } else {
    // エラーメッセージをクリア
    context.setFieldValueError('company_name', null);
    context.setFieldValueError('personal_name', null);
  }
});

フィールドコードを’'で括っても、
context.setFieldValueError(納品合計数フィールドコード, null);
の部分でエラーが出ますでしょうか？（その前まではconsole.log正しく出力されていますか？）

あとは、「cancelSubmit」というcontextオブジェクトもリファレンス内に見当たらないのではないかと思います。

[seaflour]

@marui

cancelSubmit

marui様
ありがとうございます！
頂いたアドバイスを基に修正したのですが
今度はcontext.setFieldValueError is not a functionと出てしまい
URLからも確認しましたが間違っているようには思えず、
納品合計数は計算フィールドなのですがそれが影響している可能性はありますか？

(function () {
  'use strict';

  // FormBridgeが読み込まれているか確認
  if (typeof formBridge === 'undefined') {
    console.error('FormBridge is not loaded');
    return;
  }

  console.log('FormBridge custom script is running');

  // フィールドコードを定義
  const 数量フィールドコード = '数量';
  const 納品合計数フィールドコード = '納品合計数';

  // フィールド変更時のバリデーション
  formBridge.events.on(
    'form.field.change.' + 納品合計数フィールドコード,
    function (context) {
      validateDeliveryTotal(context);
    }
  );

  // フォーム送信時のバリデーション
  formBridge.events.on('form.submit', function (context) {
    console.log('Form submit event triggered');
    validateDeliveryTotal(context);
  });

  function validateDeliveryTotal(context) {
    console.log('Validating delivery total');

    const record = context.getRecord();
    console.log('Current record:', record);

    const 納品合計数 = record[納品合計数フィールドコード].value;
    const 数量 = record[数量フィールドコード].value;

    console.log(
      '納品合計数:',
      納品合計数フィールドコード,
      '数量:',
      数量フィールドコード
    );

    if (納品合計数 > 数量) {
      console.log('Error: 納品合計数 exceeds 数量');
      // エラーメッセージを設定
      context.setFieldValueError(
        '納品合計数',
        '納品合計数は数量を超えています。'
      );
    } else {
      console.log('Validation passed');
      // エラーメッセージをクリア
      context.setFieldValueError('納品合計数', null);
    }
  }
})();

[wv-sumichan (住田 知基)]

@seaflour
エラーが発生しているタイミングや状況を明記しないと、適切な判断ができないと思います。

@marui さんは「フィールドの値が変更されたとき」のイベントの話をしていると思いますが、エラーが発生しているのは本当にそのタイミングですか？

[seaflour]

@wv-sumichan

エラーが発生しているタイミングや状況を明記しないと、適切な判断ができないと思います。

@marui さんは「フィールドの値が変更されたとき」のイベントの話をしていると思いますが、エラーが発生しているのは本当にそのタイミングですか？

住田 知基様
的確なアドバイスありがとうございます。

アドバイスをいただきそもそもエラーメッセージを出したいタイミングは保存ボタンをクリックした際にエラーメッセージを出し保存をするかしないか選択させるのがベストだと気が付き以下の様に修正しました。
やりたいことが実現できました！
ありがとうございます

(function () {
  'use strict';

  // FormBridgeが読み込まれているか確認
  if (typeof formBridge === 'undefined') {
    console.error('FormBridge is not loaded');
    return;
  }

  console.log('FormBridge custom script is running');

  // フィールドコードを定義
  const 数量フィールドコード = '数量';
  const 納品合計数フィールドコード = '納品合計数';

  // フォーム送信時のバリデーション
  formBridge.events.on('form.submit', function (context) {
    console.log('Form submit event triggered');
    validateDeliveryTotal(context);
  });

  function validateDeliveryTotal(context) {
    console.log('Validating delivery total');

    const record = context.getRecord();
    console.log('Current record:', record);

    const 納品合計数 = record[納品合計数フィールドコード].value;
    const 数量 = record[数量フィールドコード].value;

    console.log('納品合計数:', 納品合計数, '数量:', 数量);

    if (納品合計数 > 数量) {
      console.log('Warning: 納品合計数 exceeds 数量');

      // 確認ダイアログを表示
      if (
        confirm('納品合計数が数量を超えています。本当に保存していいですか？')
      ) {
        console.log('User confirmed, proceeding with save');
        // 保存を続行
        return;
      } else {
        console.log('User cancelled save');
        // 保存をキャンセル
        context.preventDefault();
        return;
      }
    } else {
      console.log('Validation passed');
      // 保存を続行
      return;
    }
  }
})();