パーツの入力内容によって、独自に必須チェックを行う

パーツの入力内容によって、独自に必須チェックを行うサンプルをご紹介します。

本サンプルでは、チェックボックスパーツがONの場合のみテキストパーツの必須チェックを行うようにします。

動作イメージ

利用するイベント

• 申請画面イベント - 申請内容確認

サンプルフォーム

サンプルで利用するフォームには、以下のパーツを配置しています。

パーツ名	パーツID	パーツタイプ	補足
必須	fidRequired	チェックボックスパーツ	テキストの必須チェック有無 ※デフォルトでチェックする：OFF 　チェック有り：チェックする 　チェック無し：チェックしない
テキスト	fidText	テキスト（一行）パーツ	入力

カスタマイズコード

(function() {
  'use strict';

  collaboflow.events.on('request.input.check', function(e) {
    const partsData = e.parts;

    // 必須が「チェックする」でテキストが未入力の場合
    if (partsData['fidRequired'].value === 'チェックする' &&
        partsData['fidText'].value === '') {

      // エラーメッセージを表示して false を返す
      alert('テキストが未入力です。');
      return false;
    }

    return true;
  });

})();

動作の確認手順

1. サンプルのカスタマイズコードをjsファイルに保存します。
2. アプリ設定＞フォーム設定から新規に通常フォームを作成します。
3. サンプルフォームに、先で記載されている必要な項目を配置します。
4. サンプルフォームを再度表示し、カスタマイズタブを表示します。
5. 保存したファイルをアップロードします。
6. アプリ設定＞経路設定から新規に経路を作成します。
7. 新規文書から作成した経路名をクリックします。
8. 申請画面が表示されます。
9. チェックボックスがONでテキストが未入力の場合にメッセージが表示されます。