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

**URL:** <https://community.cybozu.dev/t/topic/12742>\
**Category:** kintone 開発相談\
**Created:** [2026 年 9 月 1 日午前 2:39 UTC](https://community.cybozu.dev/t/topic/12742 "2026-09-01T02:39:12Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![nemutainemasu](https://avatars.discourse-cdn.com/v4/letter/n/7c8e57/32.png) [@nemutainemasu](https://community.cybozu.dev/u/nemutainemasu)\
**Post date:** [2026 年 9 月 1 日午前 2:39 UTC](https://community.cybozu.dev/t/topic/12742/1 "2026-09-01T02:39:12Z")

</div>

### 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に詳しい方がいらっしゃいましたら、ご教示いただけますと幸いです。

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

```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);
  }
});

```

---

<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:** [2026 年 9 月 1 日午前 6:10 UTC](https://community.cybozu.dev/t/topic/12742/2 "2026-09-01T06:10:13Z")

</div>

## 検討方針

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

```

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

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

```javascript
(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(); // 送信中止
    }
  });
})();

```

---

<div class="post-metadata">

**Author:** ![nemutainemasu](https://avatars.discourse-cdn.com/v4/letter/n/7c8e57/32.png) [@nemutainemasu](https://community.cybozu.dev/u/nemutainemasu)\
**Post date:** [2026 年 9 月 1 日午前 7:01 UTC](https://community.cybozu.dev/t/topic/12742/3 "2026-09-01T07:01:35Z")

</div>

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

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

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

---

<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:** [2026 年 9 月 3 日午前 7:02 UTC](https://community.cybozu.dev/t/topic/12742/4 "2026-09-03T07:02:13Z")

</div>

クローズされました: 2026 年 9 月 3 日午前 7:02 UTC

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