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

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

https://kintone-sol.cybozu.co.jp/integrate/toyokumo006.html

# JavaScriptへの記述方法
### フィールドへバリデーションを追加する記述
**その１** 

```javascript

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

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

**その２** 

```javascript
state.fields.find(({code}) => code === "code名").validations.push({
                        params: [data],
                        rule: 'sample_validation'
                    });
  ```
- fields.find(({code}) => code === "code名")でフィールドの中から追加したいフィールドのコード名を指定し、バリデーションを追加

### バリデージョンを実行したい場所に追加する
**画面ロード時** 

```javascript
fb.events.form.created.push(function (state) {
  state.fields.find(({code}) => code === "code名").validations.push({
                        params: [data],
                        rule: 'sample_validation'
                    });
  return state;
});
```
- 画面ロード時にバリデーションを追加するため、ユーザの操作によってparamsのデータが変化しない場合に使用すると良い

**入力イベント時** 

```javascript
fb.events.fields.code名.changed = [function (state) {
  state.fields.find(({code}) => code === "code名").validations.push({
                        params: [data],
                        rule: 'sample_validation'
                    });
return state;
    }];
```
- 入力イベント時に発生するため、ユーザの操作によってparamsのデータが変化する場合に使用すると良い

## バリデーションの記述方法
```javascript
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

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


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