kintoneでエラーメッセージを表示したり消したりする方法

kintoneでは、フィールドにエラーメッセージを表示したり、レコード自体にエラーメッセージを表示したりすることができます。


**🚨フィールドのエラーメッセージ**
フィールドの下に表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536148/42a971d5-8f3d-bf98-1315-8b22fadf50b0.png)

**🚨レコードのエラーメッセージ**
中央上側に表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536148/92867ce7-0bc2-9b19-b485-1301f577a806.png)


今回はフィールドやレコードに自由に（？）エラーメッセージを表示させてみましょう👀✨✨

# アプリの準備

| フィールドの種類 | フィールドコード| 備考 |
|:-:|:-:|:-:|
|数値   | 偶数  |   |
| 文字列(1行)  | 郵便番号  |   |
|テーブル|テーブル||
| 文字列(1行)  | 品名  |   テーブル内フィールド|
|  数値 | 単価  |テーブル内フィールド   |
| 数値  | 個数  | テーブル内フィールド  |
| 計算  | 金額  | 単価*個数、テーブル内フィールド  |

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536148/c54c75a2-44e5-585c-1d66-398f281d7e6c.png)

# エラーメッセージの表示方法

##フィールドにエラーメッセージを表示する
`フィールド`にエラーメッセージを表示したい時は、
recordオブジェクトの`フィールド`のerrorプロパティにエラーメッセージを設定します。
`return event;` をお忘れなく！

```js
// 保存前イベント
kintone.events.on(
  ["app.record.create.submit", "app.record.edit.submit"],
  (event) => {
    event.record.偶数.error = "偶数じゃないよ！";
    // return event; がないとエラーが表示されないよ！！！
    return event;
);
```

これで、以下のように表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536148/42a971d5-8f3d-bf98-1315-8b22fadf50b0.png)

## テーブル内フィールドにエラーメッセージを表示する
`テーブル内のフィールド`にエラーメッセージを表示したい時は、
行とフィールドを指定して、その指定したフィールドのerrorプロパティにエラーメッセージを設定します。

```js
// 保存前イベント
kintone.events.on(
  ["app.record.create.submit", "app.record.edit.submit"],
  (event) => {
    // 一番上の行の単価フィールドにエラーメッセージを表示
    event.record.テーブル.value[0].value.単価.error = "高すぎる！";
    return event;
);

```

これで、以下のように表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536148/0dbfd74c-b777-235c-044d-03707c6b183e.png)




##レコードにエラーを表示する
`レコード自体`にエラーメッセージを表示したい時は、
`event`オブジェクトのerrorプロパティにエラーメッセージを設定します。

```js
// 保存前イベント
kintone.events.on(
  ["app.record.create.submit", "app.record.edit.submit"],
  (event) => {
    event.error = "エラーがあります！";
    return event;
);
```

これで、以下のように表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536148/92867ce7-0bc2-9b19-b485-1301f577a806.png)


## エラーメッセージを消す

エラーメッセージを消したい時はerrorプロパティに`null`を設定します。

```js
// フィールドのエラーメッセージを消す
event.record.偶数.error = null;

// レコードのエラーメッセージを消す
event.error = null;
```


# 条件つきでエラーメッセージを表示する
フィールドやレコードの条件によってエラーメッセージを表示する方法です。

## 保存時に「偶数」でなければフィールドにエラーメッセージを表示する

偶数フィールドの数値の余りが0でなければエラーメッセージを表示します。

```js
// 偶数じゃなかったらエラー
if (!(event.record.偶数.value % 2 === 0)) {
  event.record.偶数.error = "偶数じゃないよ！";
}
```

## 郵便番号の書式(3桁-4桁)でなければフィールドにエラーメッセージを表示する

郵便番号の書式(3桁-4桁)を正規表現で表して、マッチしなければエラーメッセージを表示します。

```js
// 正規表現 3桁数字-4桁数字
const rx_pcode = /^[0-9]{3}-[0-9]{4}$/;
if (!rx_pcode.test(event.record.郵便番号.value)) {
  event.record.郵便番号.error = "郵便番号じゃないよ";
}
```


## テーブル内のフィールドに条件付きでエラーメッセージを表示したい

テーブル内のフィールドにエラーメッセージを表示したい時は`forEach`でループすると便利です。

```js

const rx_pname = /牛乳/;
event.record.テーブル.value.forEach((r) => {
  if (rx_pname.test(r.value.品名.value)) {
    // 品名に牛乳が入ってたらエラーにする
    r.value.品名.error = "牛乳はダメ！";
  }
  if (Number(r.value.単価.value) > 1000) {
    // 単価が1000円より高かったらエラー
    r.value.単価.error = "高すぎる！";
  }
  if (Number(r.value.個数.value) !== 8) {
    // 個数が8個じゃなかったらエラー
    r.value.個数.error = "縁起が悪い！";
  }
});
```

テーブル内のフィールドに条件つきでエラーメッセージ表示した場合、以下のように表示されます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536148/1e49ffcd-71b5-def6-825d-ee4ef281cd7f.png)


## 操作に30秒以上かかったらレコードエラーメッセージを表示する

（誰が必要とする条件なのかはわかりませんが）
追加、編集表示時にカウントアップをスタートして、
30秒よりも時間がかかっていたらエラーメッセージを表示します。

```js
let count = 0;

kintone.events.on(
  ["app.record.edit.show", "app.record.create.show"],
  (event) => {
    const countup = setInterval(() => {
      count++;
    }, 1000);
  }
);

kintone.events.on(
  ["app.record.create.submit", "app.record.edit.submit"],
  (event) => {
    // 30秒よりもかかってしまったらエラーメッセージを表示
    if (count > 30) {
      event.error = "作業が遅い！";
    }
    return event;
  }
);
```


## 保存時ではなくて入力するたびに入力値がOKかerrorか確認したい

エラーメッセージの表示が保存時じゃ遅い！ということもあると思います。
入力直後に入力内容が正しいかどうか知りたいですよね。

偶数フィールドを使用した例ですが、`フィールドの値変更時イベント`で

* 偶数ならエラーメッセージを消す
* 偶数でなければ、エラーメッセージを表示する

とするとOKです。


```js
kintone.events.on(
  ["app.record.create.change.偶数", "app.record.edit.change.偶数"],
  (event) => {
    event.error = null;
    // 偶数だったらエラー表示を削す
    if (event.record.偶数.value % 2 === 0) {
      // nullを設定するとエラーメッセージが消えます
      event.record.偶数.error = null;
    } else {
      // 偶数でなければエラーメッセージ表示する
      event.record.偶数.error = "偶数じゃないよ！";
    }
    return event;
  }
);
```

# まとめ
フィールド、レコードにエラーメッセージを表示する方法でした。
`return event;` がないとエラーメッセージが表示されないので要注意です👀！