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

kintone(キントーン)の標準機能でできないところをJavaScriptやCSSを使って実現しています。今回は日付フィールドに入力がない時に値を判定する方法です。

■ フィールド定義

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

​

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

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

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

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

◎ 保存実行前「undefined」
Firefoxのデバッガーで値を確認

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

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

◎ 保存成功後「null」
Firefoxのデバッガーで値を確認

支払日には「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);

})();

【kintone】日付フィールドの未入力を判定する｜日々の暮らし