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

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

🚨フィールドのエラーメッセージ
フィールドの下に表示されます。

🚨レコードのエラーメッセージ
中央上側に表示されます。

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

アプリの準備

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

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

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

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

これで、以下のように表示されます。

テーブル内フィールドにエラーメッセージを表示する

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

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

これで、以下のように表示されます。

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

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

これで、以下のように表示されます。

エラーメッセージを消す

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

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

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

条件つきでエラーメッセージを表示する

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

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

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

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

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

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

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

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

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

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 = "縁起が悪い！";
  }
});

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

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

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

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です。

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; がないとエラーメッセージが表示されないので要注意です👀！