jQuery Validation默认情况下将错误显示为内联,需要将其更改为内联块

Question

我正在使用jQuery Validation插件

如何在不隐藏时将生成的错误消息display值更改为inline-block？

我尝试过使用CSS,但jQuery会覆盖它.

Answer 1

我遇到了这个并且无法使用CSS,因为jQuery在初始创建后使用错误元素(设置"display:block;"inline)上的show()和hide()方法.相反,您可以使用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