jquery.validationEngine.jsカスタマイズ

jquery.validationEngine.jsを使用しています。

validationEngine.jquery.css
「.formError .formErrorContent」
スタイルシートを変更したり、または、
「data-prompt-position="inline"」
などを駆使して、
エラーコメントが
<input>の真下に出るようにしたり、または
コメントが長くなったら、横幅のサイズを変えたりとしていますが、
なかなかうまくいきません。

<input>によって
.formError.inline {}のスタイルシートを分けることができますでしょうか。
分けてみてもjsでCSSを設定しているためかまったく聞きません。
宜しくお願い致します。

No.1 回答者： fujillin 回答日時： 2016/09/16 14:40

こんにちは。

　回答がないみたいですので・・・

validationEngineって使ったことがないですし、英語を読むのも苦手なので大雑把にテストしただけですが、何かのご参考にでもなれば。
一応、validationEngineはこれのことだと解釈しています。
https://github.com/posabsolute/jQuery-Validation …

どの程度の制御をなさりたいのかご質問文の情報だけではよくわからないのですが、
＞コメントが長くなったら、横幅のサイズを変えたりとしていますが、
＞なかなかうまくいきません。
程度のことであるのなら、widthを制限しておけばHTMLの特性として、文章が長くなれば自動的に折り返してくれるはずですけれど・・・？

とりあえず、個別にエラーメッセージの設定ができることを目標として考えてみました。
最終的には、それぞれに個別のCSSを適用できれば良いので、個々に指定可能なセレクタさえ設定できれば良い

ドキュメンテーションをざっと眺めてみると（読んでないけど）、「表示スタイルを変えたいときは、CSSをいじってね」みたいなことが書かれているので、スクリプトとCSSが干渉することのないようにきちんと作成されているようです。
コメントのdivは、エラーが発生する都度、生成/削除されているようで、文書内の該当input等の直前に挿入されるようです。
直後であれば、input（←idを設けていると思いますので）の隣接セレクタで特定が可能なのですが、直前だとうまくいきませんね。

ということで、以下の2種類の方法で試してみました。
1）label:nth-childを利用して個別に特定する。
2）スクリプトでバリデーション実行時にフックできる仕組みがあるようなので、それを利用して、メッセージに個別の識別子を設定する。（例えばinputのidをクラスとしてメッセージに設定するとか）
どちらの方法でもできましたが、確認中によく見てみると、すでに個別の識別子が設定されているみたい。
作者さんがちゃんとそこまで配慮してくれているようでした。（気付かんかった）

メッセージのdiv要素のクラスに、「input要素のid」+"formError" という個別のクラス設定がされていました。
ということで、なんのことはない。それを利用すればセレクタで個別に指定可能になっています。
（ドキュメントをちゃんと読めばどこかに書いてあったのかも。）


デモの中にある「demoAdjustments」を例にしてみると、
そのままだと、添付図の左側になりますが、2番目と3番目を個別に指定してみると右側のようになります。
標準のとなるものはメインのＣＳＳで設定し、個別指定のものは変わる部分だけを指定すればよいです。
（個別指定がきちんと反映されるように、セレクタの詳細度にご注意。）

指定しているのは、背景色、文字色、文字サイズ・太さ、ボックスの幅など。
背景色は吹き出し状の矢印部分が別要素になっているので、そちらも指定しておかないと違う色のつぎはぎになっちゃいます。

※ ご参考までに、添付図で追加したCSSは以下です。
/* input#req2用のCSS */
.req2formError .formErrorContent {
background-color:moccasin; color:blue;
font-size:14px;
}
.req2formError .formErrorArrow div {
background-color:moccasin;
}
/* textarea#add用のCSS */
.addformError .formErrorContent {
background-color:lightgreen; color:red;
font-size:16px; font-weight:bold;
min-width:30px; max-width:60px;
}
.addformError .formErrorArrow div {
background-color:lightgreen;
}

この回答へのお礼

> 個別にエラーメッセージの設定
これがやりたかったのです！
ありがとうございます！

お礼日時：2016/09/16 16:36