event.error で複数バリデーションエラーのメッセージを一列で並べたい

kintone カスタマイズ
1

こんにちは、marfaです。

質問：
event.error表示時に、複数のバリデーションのエラーメッセージを一列で並べて表示したい。

例）
エラー
・郵便番号を入力してください
・電話番号を入力してください

現状：
エラー
・郵便番号を入力してください・電話番号を入力してください

このように横に表示されます。

虫眼鏡ツールで確認したところ、以下のようになっています。

<div class=“notifier-title-cybozu”>エラー</div>
<div class=“notifier-body-cybozu”>
<li>・郵便番号を入力してください・電話番号を入力してください</li>
</div>

kintone上で、すでにliの仕様になっているようなので、そこにつっこんで
さらに改行して一列というのは難しいのかな？と思っています。

良い解決方法があったら教えてください！

2

Marfaさん

.notifier-body-cybozu li {
  white-space: pre;
}

のようなCSSを入れれば改行表示はできます。

また、

(new MutationObserver(function(mutations, observer){
  var notifier = document.querySelector(".notifier-body-cybozu");
  if(notifier){
    notifier.innerHTML = notifier.innerHTML.replace(//g, "</li><li>");
  }
})).observe(document.body, {childList:true});

のようなコードをあらかじめレコード登録/編集画面表示時イベントなどで実行しておけば、DOM操作でliタグ内部の改行文字をliタグに置き換えて改行表示にすることができます。

どちらもkintoneのアップデートで使えなくなる可能性はありますが、参考になりますでしょうか

3

瀧ヶ平さん
毎度ありがとうございます。
そうですよね、cssでの実装になりますよね！

arrayを表示させていたので、
一旦このようにstr形式に戻してcssを書いたらうまくいきました！
//js
var msg_str = msg_array.join(‘’);
event.error = msg_str;

//css
.notifier-body-cybozu li {
white-space: pre;
color: red;
}

参考になりました。ありがとうございました！