グループに色付けた場合、レコードのエラー時、背景赤をどうすれば反映できますでしょうか?

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

以下のように、

「回収状況」: 未回収  の場合、「回収予定日」を入力しないとエラーで「必須です」となるようにしております。

普通であれば「回収状況1」「回収予定日1」で、赤の背景に白文字で「必須です」となりますが、

グループの背景色を変えた場合、赤の背景がなくなって、白文字の「必須です」となってしまいますが、

なにか目出すように「必須です」を表示させる方法はありますでしょうか?

ぜひ、ご指導のほどよろしくお願い致します。

(function () {
“use strict”;
// エラーを表示する処理
var events2 = [‘app.record.index.edit.submit’, ‘app.record.create.submit’, ‘app.record.edit.submit’, ‘app.record.edit.show’];
kintone.events.on(events2, function (event) {
var record = event.record;

if (record.回収状況.value === “未回収” && !record.回収予定日.value) {
record.回収予定日.error = “必須です”;
}

if(record.回収状況1.value === “未回収” && !record.回収予定日1.value) {
record.回収予定日1.error = “必須です”;
}

return event;
});
})();

======================================

グループの背景css

.layout-gaia.editablelayout-gaia .control-gaia.control-group-field-gaia.field-0000000{
border-color: #572e2e;
background-color: #f3cdcd;
}
.layout-gaia.editablelayout-gaia .control-gaia.control-group-field-gaia.field-0000000 * {
background-color: #f3cdcd;
}

 

柳生 様

こんにちは。
恐らく下記cssで、グループ内すべての要素の背景色を指定している、
つまりエラーメッセージの背景も含めて、グループの背景色に指定しているのが原因かと思います。

.layout-gaia.editablelayout-gaia .control-gaia.control-group-field-gaia.field-0000000 * {
background-color: #f3cdcd;
}

そのため、上記部分の指定を削除してグループの背景色のみを指定する、
もしくはエラーメッセージの背景色を本来の色に指定するcssの記述を追加するのはいかがでしょうか。

また、ご存知と思いますがDOM 操作の場合、
今後のアップデートで動作しなくなる可能性があるのでご注意ください。

sio

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

お忙しいところ、アドバイス頂き、誠にありがとうございます。

おっしゃる通り、グループ内すべての要素の背景色を指定したからでした。

.layout-gaia.editablelayout-gaia .control-gaia.control-group-field-gaia.field-0000000 * {
background-color: #f3cdcd;
}

を削除することで、エラーはいつものように表示されることができました!

ただ、ほかのフィールド名の背景色が変になってしますので、

グループの背景css

.layout-gaia.editablelayout-gaia .control-gaia.control-group-field-gaia.field-0000000{
border-color: #572e2e;
background-color: #f3cdcd;
}

.input-error-cybozu {
background-color: #ed2125;
}

.layout-gaia.editablelayout-gaia .control-gaia.control-group-field-gaia.field-0000000 * {
background-color: #f3cdcd;
}

追加でエラーメッセージの背景色を本来の色に指定するcssを書きたいですが、

エラーの赤い背景がなくなって、うまく書けず(:sweat_smile:)、再度アドバイス頂けることは可能でしょうか?

柳生 様

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

>追加でエラーメッセージの背景色を本来の色に指定するcssを書きたいですが、

追加で指定する部分は、エラーの赤い背景の指定の優先順位を上げると
表示されると思いますが、試して頂けますでしょうか。

.input-error-cybozu, .input-datetimebase-error-permanent-cybozu {
background-color: #e74c3c !important;
}

sio

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

お忙しいところ、再度アドバイス頂き、ありがとうございます。

お蔭様で想定の動きができました!

とても勉強になりました(感動!)

このたびは何度もご指導頂き、誠にありがとうございました。

今後ともどうぞよろしくお願い致します。

柳生 様

解決されたようで何よりです!
今後ともどうぞよろしくお願い致します。