選択項目のエラー表示について

kintone カスタマイズ
1

 いつも大変お世話になっております。

①契約：する のとき⇒契約区分＆媒体＆請求が必須

②さらに契約区分：特別なとき⇒特別料金＆特別料金詳細が必須

③契約区分：時別以外⇒特別料金＆特別料金詳細が非表示（一覧の画面では特別以外は特別料金＆特別料金詳細がグレーで編集できない状態）

な動きをしたいです。コードを以下のようにしました。

(function() {
“use strict”;

//レコードの追加、編集、詳細画面で適用する
var events = [‘app.record.detail.show’,
‘app.record.create.show’,
‘app.record.create.submit’,
‘app.record.index.edit.submit’,
‘app.record.index.edit.show’,

‘app.record.index.edit.submit’,
‘app.record.index.edit.change.契約’,
‘app.record.index.edit.change.契約区分’,
‘app.record.index.edit.change.媒体’,
‘app.record.index.edit.change.請求’,
‘app.record.create.change.契約’,
‘app.record.create.change.契約区分’,
‘app.record.create.change.媒体’,
‘app.record.create.change.請求’,
‘app.record.edit.show’,
‘app.record.edit.submit’,
‘app.record.edit.change.契約’,
‘app.record.edit.change.契約区分’,
‘app.record.edit.change.媒体’,
‘app.record.edit.change.請求’,
];

kintone.events.on(events, function(event) {

var record =event.record;
var past = record.契約.value;
var past1 = record.契約区分.value;

if (past === ‘する’) {
if (!event.record.契約区分.value) {
event.record.契約区分.error = ‘契約区分を選択してください!’;
}
if (!event.record.媒体.value) {
event.record.媒体.error = ‘媒体を選択してください!’;
}
if (!event.record.請求.value) {
event.record.請求.error = ‘請求を選択してください!’;
}
}else{
record.契約区分.error = null;
record.媒体.error = null;
record.請求.error = null;
}
//フィールドの表示、非表示を切り替える
if (past1 === ‘特別’) {
kintone.app.record.setFieldShown(‘特別料金詳細’, true);
kintone.app.record.setFieldShown(‘特別料金’, true);
record.特別料金.disabled = false;
record.特別料金詳細.disabled = false;
if (!event.record.特別料金.value) {
event.record.特別料金.error = ‘特別料金を入力してください!’;
}
}else{
//特別以外を選択した場合は非表示
kintone.app.record.setFieldShown(‘特別料金’, false);
kintone.app.record.setFieldShown(‘特別料金詳細’, false);
record.特別料金詳細.value = “”;//非表示の時にvalueを空にする
record.特別料金.value = “”;
record.特別料金.disabled = true;
record.特別料金詳細.disabled = true;
}

return event;
});
})();

これで発生する問題は

①別料金＆特別料金詳細が編集できない。

 

②一覧で編集するときも同じです。

 

問題は

if (past1 === ‘特別’) {
kintone.app.record.setFieldShown(‘特別料金詳細’, true);
kintone.app.record.setFieldShown(‘特別料金’, true);
record.特別料金.disabled = false;
record.特別料金詳細.disabled = false;
if (!event.record.特別料金.value) {
event.record.特別料金.error = ‘特別料金を入力してください!’;
}

の

if (!event.record.特別料金.value) {
event.record.特別料金.error = ‘特別料金を入力してください!’;
}

の部分が入ることによるみたいですが、この設定はいれたいですが、どんなふうにどこに入れればよろしいかぜひコードのご指導いただきたいです。

どうぞよろしくお願い致します。

2

errorの表示があるとdisabled の処理が動かないみたいですね！

試しに手元で「特別料金」のエラー処理を消し、さらに「媒体」「請求」「契約」に値を入力すると、

きちんとdisabledの処理が動きましたが、どこか1つでもエラーがあるとdisabledが動かなかったです。

 

今とれる対策としては、エラー表示のタイミングをchangeイベントではなく、submitのみに限定してしまう方法でしょうかね

→ 常にフィールド下部にエラーを出すのではなく、保存ボタンを押した時に判定するかんじです

3

BB 様

お世話になっております。

アドバイス頂き、本当に感謝しております。おっしゃっているように、

エラー表示のタイミングをchangeイベントではなく、submitのみに限定してしまう方法というのは、

今のコードを二つに分けるということでしょうか？「特別」なときに「特別料金」が記入されてないとエラーにするのはどうすれば？・・・

どんなふうにコードを書き換えればよろしいでしょうか？まだ知識が浅いもので、混乱しておりますが、

コードについてもうちょっと教えていただくことは可能でしょうか？

大変お手数をおかけしますが、助けて頂けると幸いです。

 

4

show,change系のイベントとsubmit系のイベントで処理を分けることができるので、

  • フィールドの表示/非表示、編集可/不可の処理 (show, change系)
  • エラーを表示する処理 (submit系)

と同じプログラム内で分けることができると思います！

 

この場合、あくまでエラーが出るタイミングは kintoneの保存ボタンを押した時 になりますが、

表示/非表示 と エラー表示 をうまく動作させることができます。

(function() {
'use strict';
// 表示/非表示、編集可/不可を切り替える処理
var events1 = [
'app.record.index.edit.show',
'app.record.index.edit.change.契約',
'app.record.index.edit.change.契約区分',
'app.record.index.edit.change.媒体',
'app.record.index.edit.change.請求',
'app.record.create.show',
'app.record.create.change.契約',
'app.record.create.change.契約区分',
'app.record.create.change.媒体',
'app.record.create.change.請求',
'app.record.edit.show',
'app.record.edit.change.契約',
'app.record.edit.change.契約区分',
'app.record.edit.change.媒体',
'app.record.edit.change.請求',
'app.record.detail.show'
];
kintone.events.on(events1, function(event) {
var record = event.record;
var past1 = record.契約区分.value;
// フィールドの表示、非表示を切り替える
if (past1 === '特別') {
kintone.app.record.setFieldShown('特別料金詳細', true);
kintone.app.record.setFieldShown('特別料金', true);
record.特別料金.disabled = false;
record.特別料金詳細.disabled = false;
} else {
// 特別以外を選択した場合は非表示
kintone.app.record.setFieldShown('特別料金', false);
kintone.app.record.setFieldShown('特別料金詳細', false);
record.特別料金詳細.value = ''; // 非表示の時にvalueを空にする
record.特別料金.value = '';
record.特別料金.disabled = true;
record.特別料金詳細.disabled = true;
}
return event;
});

// エラーを表示する処理
var events2 = [
'app.record.index.edit.submit',
'app.record.create.submit',
'app.record.edit.submit'
];
kintone.events.on(events2, function(event) {
var record = event.record;
var past = record.契約.value;
var past1 = record.契約区分.value;

// 初期状態でエラーを消す
record.契約区分.error = null;
record.媒体.error = null;
record.請求.error = null;

if (past === 'する') {
if (!record.契約区分.value) {
record.契約区分.error = '契約区分を選択してください!';
}
if (!record.媒体.value) {
record.媒体.error = '媒体を選択してください!';
}
if (!record.請求.value) {
record.請求.error = '請求を選択してください!';
}
} else {
record.契約区分.error = null;
record.媒体.error = null;
record.請求.error = null;
}

if (past1 === '特別' && !record.特別料金.value) {
record.特別料金.error = '特別料金を入力してください!';
} else {
record.特別料金.error = null;
}
return event;
});
})();
5

BB 様

お世話になっております。

とてもわかりやすいソースを書いていただいて、本当にお忙しいところありがとうございました。

とても急ぎで、焦っていた件なので、とても助かりました。誠にありがとうございました。