jquery - jQuery Validation 默认将错误显示为 inline，需要将其更改为 inline-block

Question

我正在使用jQuery 验证插件

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

我尝试过使用 CSS，但 jQuery 会覆盖它。

Answer 1

我遇到了这个问题并且无法使用 CSS，因为 jQuery 在初始创建后在错误元素（设置“display:block;”内联）上使用了 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

Answer 3

如果你!important在你的 CSS 上使用它，它应该优先于 jQuery 所做的：

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

Answer 4

jQuery validate 没有定义任何 CSS 样式。您是否使用任何其他带有 CSS 定义的“错误”类库？

这是 JsFiddle 示例代码，其中 jQuery 使用 inline-block 验证错误消息：

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

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

打开它并检查您的浏览器：