kintone

【kintone】日付フィールドの未入力を判定する

【kintone】日付フィールドの未入力を判定する
kintoneの標準機能でできないところをJavaScriptやCSSを使って実現しています。

評価:4.5

今回は日付フィールドに入力がない時に値を判定する方法です。

モンキー
モンキー
日付が未入力の時の判定ってちょっとコツがいるんだ
ピンキー
ピンキー
動作のタイミングによって取得する値が変わるんだよね

フィールド定義

日付フィールドを設定します。

日付フィールドを設定
フィールドタイプ フィールド名 フィールドコード
日付フィールド 支払日 due_date

日付フィールドの値を削除する

日付が入力されている日付フィールドをカレンダーから「選択を解除」または「DELETEキー」で値を削除します。「保存ボタン」を押した後、JavaScriptで日付フィールドの未入力チェックをしたり、値を判定して他のアプリを更新したりする際に「入力なし」の場合の判定が上手くいかなかったのでデバッグしてみました。

日付フィールドの値を削除する

取得のタイミングで値が異なる

日付フィールドが未入力の場合、保存実行前(保存ボタンクリック時)と保存成功後では、日付フィールドの値が異なるようです。

保存実行前「undefined」

Firefoxのデバッガーで値を確認

保存実行前「undefined」

支払日には「undefined」が入っているので、以下のコードでalertが表示されます。

if ((record['due_date']['value'] === undefined) ||
    (record['due_date']['value'].length <= 0)) {
  alert('保存実行前:支払日の入力なし');
}

保存成功後「null」

Firefoxのデバッガーで値を確認

保存成功後「null」

支払日には「null」が入っているので、以下のコードでalertが表示されます。

if ((record['due_date']['value'] === undefined) ||
    (record['due_date']['value'] === null) ||
    (record['due_date']['value'].length <= 0)) {
  alert('保存成功後:支払日の入力なし');
}

nullの判定をしなかった場合

保存成功後の処理で「null」の判定をしなかった場合はエラーになります。

TypeError: record.due_date.value is null

JavaScript サンプルコード

保存実行前(保存ボタンクリック時)と保存成功後で、日付フィールドの入力あり・入力なしが正しく判定されているかを確認するためのコードです。

(function() {
"use strict";

/*
* 登録画面・編集画面・一覧画面/保存ボタンクリック時
*/
function editSubmit(event) {

  // レコード取得
  var record = event.record;

  // 支払日が未入力の時
  if ((record['due_date']['value'] === undefined) ||
      (record['due_date']['value'].length <= 0)) {
    alert('保存実行前:支払日の入力なし');
  } else {
    alert('保存実行前:支払日の入力あり');
  }

  return event;
}

/*
* 登録画面・編集画面・一覧画面/保存成功後
*/
function editSubmitSuccess(event) {

  // レコード取得
  var record = event.record;

// 支払日が未入力の時
  if ((record['due_date']['value'] === undefined) || 
      (record['due_date']['value'] === null) ||
      (record['due_date']['value'].length <= 0)) {
    alert('保存成功後:支払日の入力なし');
  } else {
    alert('保存成功後:支払日の入力あり');
  }

  return event;
}

/* ------------------------------------------------------------------ */

// 登録画面・編集画面・一覧画面/保存ボタンクリック時
kintone.events.on(['app.record.create.submit',
                   'app.record.edit.submit',
                   'app.record.index.edit.submit'], editSubmit);


// 登録画面・編集画面・一覧画面/保存成功後
kintone.events.on(['app.record.create.submit.success',
                   'app.record.edit.submit.success',
                   'app.record.index.edit.submit.success'], editSubmitSuccess);

})();
この記事は、2020.8.16時点の情報です。