FormBridgeの数値フィールドの入力チェックについて

kintone 開発相談
1

FormBridgeのフォーム内に、数値フィールドとして以下の2項目を設定しています。

  • お弁当個数（フィールドコード：number）
  • お弁当単品個数（フィールドコード：okazutanpin）

どちらも初期値は「0」に設定しています。

今回、以下のような入力チェックをJavaScriptで実装したいと考えています。

【実現したいこと】

  • 「お弁当個数」と「お弁当単品個数」がどちらも「0」の場合
    → エラーメッセージを表示し、送信できないようにする
  • どちらか一方でも「1以上」の数値が入力されている場合
    → 送信できるようにする

現在、AIにも相談しながらJavaScriptを作成しており、下記のコードで試したところ、

  • 2項目とも「0」→ エラーメッセージが表示され、送信できない
  • その後、どちらか一方を「1以上」に変更 → エラーメッセージは消えず、送信できない

という状態になっています。

「0・0」の場合は送信不可、「1・0」「0・1」「2・3」など、どちらか一方でも1以上になれば送信可能、という動作にしたいのですが、どのようにJavaScriptを記述すればよいでしょうか。

FormBridgeのJavaScriptに詳しい方がいらっしゃいましたら、ご教示いただけますと幸いです。

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

formBridge.events.on('form.submit', function (context) {
  const record = formBridge.fn.getRecord();

  const bentoQty = Number(record['number']?.value ?? 0);
  const okazuQty = Number(record['okazutanpin']?.value ?? 0);

  // お弁当・おかず単品が両方0の場合
  if (bentoQty === 0 && okazuQty === 0) {
    context.preventDefault();

    formBridge.fn.setFieldValueError(
      'number',
      'お弁当・おかず単品のどちらかを1個以上入力してください。'
    );

    formBridge.fn.setFieldValueError(
      'okazutanpin',
      'お弁当・おかず単品のどちらかを1個以上入力してください。'
    );
  } else {
    // エラーをクリア
    formBridge.fn.setFieldValueError('number', null);
    formBridge.fn.setFieldValueError('okazutanpin', null);
  }
});
2

検討方針

formBridge.events.on('form.submit', function (context){

にブレイクポイントを仕掛けると
一度エラーになると、数値を修正して再度送信ボタンを押してもform.submitのイベントが発生していない。
エラーを解除するコードが form.submitの内側にあると二度とエラー解除できず、正しい数値にしても送信できない。

数値のエラーを解消した段階でエラーを消すように変更して form.submitが再度実行できるようにしました。

(function () {
  'use strict';

  /**
   * 最新の入力値を基に両方0かどうか判定し、エラーを設定または解除する
   * @param {number} bentoQty - お弁当個数の最新値
   * @param {number} okazuQty - おかず単品個数の最新値
   * @returns {boolean} バリデーション結果（両方0ならfalse）
   */
  function checkAndSetErrors(bentoQty, okazuQty) {
    if (bentoQty === 0 && okazuQty === 0) {
      const errorMessage = 'お弁当・おかず単品のどちらかを1個以上入力してください。';
      formBridge.fn.setFieldValueError('number', errorMessage);
      formBridge.fn.setFieldValueError('okazutanpin', errorMessage);
      return false;
    } else {
      // どちらか一方でも1以上であればエラーを解除
      formBridge.fn.setFieldValueError('number', null);
      formBridge.fn.setFieldValueError('okazutanpin', null);
      return true;
    }
  }

  // 1. お弁当個数が変更された時
  formBridge.events.on('form.field.change.number', function (context) {
    const record = formBridge.fn.getRecord();
    // numberは変更後の最新値 context.value を参照
    const bentoQty = Number(context.value ?? 0);
    const okazuQty = Number(record['okazutanpin']?.value ?? 0);

    checkAndSetErrors(bentoQty, okazuQty);
  });

  // 2. お弁当単品個数が変更された時
  formBridge.events.on('form.field.change.okazutanpin', function (context) {
    const record = formBridge.fn.getRecord();
    const bentoQty = Number(record['number']?.value ?? 0);
    // okazutanpinは変更後の最新値 context.value を参照
    const okazuQty = Number(context.value ?? 0);

    checkAndSetErrors(bentoQty, okazuQty);
  });

  // 3. 送信ボタンが押された時
  formBridge.events.on('form.submit', function (context) {
    const record = formBridge.fn.getRecord();
    const bentoQty = Number(record['number']?.value ?? 0);
    const okazuQty = Number(record['okazutanpin']?.value ?? 0);

    const isValid = checkAndSetErrors(bentoQty, okazuQty);
    if (!isValid) {
      context.preventDefault(); // 送信中止
    }
  });
})();
3

ありがとうございます！！
教えていただいた方法でコードを修正したところ、無事にちゃんと動きました！！

自分ではそこまで全然気づけなかったので、本当に助かりました:sob:

JavaScriptはほぼ初心者で、AIに聞きながら何度も試していたのですが、なかなかうまくいかず困っていたので、原因から分かりやすく教えていただいてすごく勉強になりました。
本当にありがとうございました！！:woman_bowing: