jquery - jQuery Validationは、デフォルトでエラーをインラインとして表示します。これをinline-blockに変更する必要があります

Question

jQuery検証プラグインを使用しています

display生成されたエラーメッセージの値を非表示にしない場合に変更するにはどうすればよいinline-blockですか？

CSSで試しましたが、jQueryがこれを上書きします。

Answer 1

私はこれに遭遇し、jQueryが最初の作成後にエラー要素（ "display：block;"をインラインに設定）でshow（）メソッドとhide（）メソッドを使用しているため、CSSを使用できませんでした。代わりに、validateプラグインのhighlightメソッドとunhighlightメソッドを使用して、インラインcssを変更できます。

    errorElement: 'em',

highlight: function(element, errorClass) {
    $(element).addClass(errorClass); // good for changing field backgrounds
    $(element).next('em').css('display','inline'); // keeps error message layout clean
},

unhighlight: function(element, errorClass) {
        $(element).removeClass(errorClass); // good for changing field backgrounds
        $(element).next('em').css('display','none'); // keeps error message layout clean
},

Answer 2

このオプションを使用して、errorClassエラーメッセージとエラー要素に割り当てられるクラスを指定します。

$(".selector").validate({
   errorClass: "invalid"
})

<style type="text/css">
  .invalid {
    display: inline-block !important;
  }
</style>

バリデーターオプションについては、ドキュメントを参照してください。

http://docs.jquery.com/Plugins/Validation/validate#options

Answer 3

CSSで使用する場合は!important、jQueryの機能よりも優先する必要があります。

.error {
    display: inline-block !important;
}

Answer 4

jQueryvalidateにはCSSスタイルが定義されていません。「エラー」クラスのCSS定義を持つ他のライブラリを使用していますか？

エラーメッセージのインラインブロックを使用してjQueryが検証するJsFiddleサンプルコードは次のとおりです。

http://jsfiddle.net/maxim75/HKnQD/4/

.error
{
    color: Red;
    display: inline-block;
}​

それを開いてブラウザでチェックインします。