フォームブリッジでカスタムバリデーション作成方法

はじめに

フォームブリッジでカスタムバリデーションを実装する方法を紹介します。
フォームブリッジはwebフォームを作成し、入力された情報を自動でkintoneにデータ保存出来るサービスです。
詳しくはこちら！

JavaScriptへの記述方法

フィールドへバリデーションを追加する記述

その１

state.fields[0].validations.push({
            params: [data],
            rule: 'sample_validation'
        });

• fields[0]で追加したいフィールドを特定し、バリデーションを追加
  • フィールドの順番が今後変化する場合には使用せず、その２で紹介する方法がおすすめ
• paramsにはバリデーションチェックするために必要な値を格納する
• ruleにはバリデーションの名前を自分で付ける

その２

state.fields.find(({code}) => code === "code名").validations.push({
                        params: [data],
                        rule: 'sample_validation'
                    });

• fields.find(({code}) => code === "code名")でフィールドの中から追加したいフィールドのコード名を指定し、バリデーションを追加

バリデージョンを実行したい場所に追加する

画面ロード時

fb.events.form.created.push(function (state) {
  state.fields.find(({code}) => code === "code名").validations.push({
                        params: [data],
                        rule: 'sample_validation'
                    });
  return state;
});

• 画面ロード時にバリデーションを追加するため、ユーザの操作によってparamsのデータが変化しない場合に使用すると良い

入力イベント時

fb.events.fields.code名.changed = [function (state) {
  state.fields.find(({code}) => code === "code名").validations.push({
                        params: [data],
                        rule: 'sample_validation'
                    });
return state;
    }];

• 入力イベント時に発生するため、ユーザの操作によってparamsのデータが変化する場合に使用すると良い

バリデーションの記述方法

fb.addValidators = function (state) {
return {
            sample_validation: {
                getMessage: function (fieldCode, params) {
                    return 'バリデーションエラーのメッセージ';
                },
                validate: function (value, params) {
                    //処理の中身を記述
                    return false;
                }
            }
        }
};

• fb.addValidators = function (state) {}の中にバリデーションの処理を追加していく。※複数のバリデーションを記述しても可
• sample_validationが自分がつけたバリデーションの名前
• getMessage:のreturnに表示させたいエラーメッセージを記述
• validate:にバリデーションの処理の中身を記述。returnがfalseの場合にエラーとなる。

応用編

kViewerを利用し、kintoneアプリのデータを呼び出してそのデータを元にバリデーションを実行する方法を紹介します。
kViewerとはkintone内の情報を、ライセンスを保有していない閲覧者・外部の方に公開するためのサービスです
詳しくはこちら！
https://kintone-sol.cybozu.co.jp/integrate/toyokumo003.html?_ga=2.47974183.1487919851.1611485452-1158750218.1608367703

ここでは番号が重複している場合にエラーとするバリデーションを紹介します

let number = "";
// Kviewerで設定されたURLを記述する
kv_data = "https//....";
function getSampleAllData(number) {
   const params = {
          additionalFilters:[
                 // 入力した番号に一致するものを取得する
                {
                    width: "and",
                    field: "番号",
                    sign: "=",
                    value: number
                }
          ]
   };
  
   const url_sample = kViewr.generateUrl(kv_data, params);

   return $j.ajax({
       url: url_sample
   });
};

fb.events.fields.番号.changed = [function (state) {
  state.fields.find(({code}) => code === "番号").validations.push({
                        params: [getSampleAllData(record.["番号"].value)],
                        rule: 'sample_validation'
                    });
  return state;
}];

fb.addValidators = function (state) {
   return {
         sample_validation: {
         getMessage: function (fieldCode, params) {
               return '番号が重複しています。';
          },
         validate: function (value, params) {
               if (params[0].totalCount > 0) {
                  return false;
               } else {
                  return true;
               }
         }
         }
   }
};