jQuery Validate插件将内联样式添加到错误中？

Question

我在这里有一个非常基本的例子.要复制,请尝试提交表单,然后它会提醒您该字段是必需的.然后填写一些文字,然后删除所有文字.您将看到错误消息跳转到下一行.

在使用Firebug进行检查后,它显示插件正在style="display: block"元素上添加内联.如何防止在元素上生成任何内联样式？我知道你可以修改样式的.error类,但它应用的内联样式显然胜过应用的类.

Answer 1

style="display: block"通过JavaScript 添加是在运行时动态显示和隐藏元素的唯一方法.这并不像大多数内联样式那么糟糕.当你调用$("#myElement").show()普通的jQuery 时,会发生同样的事情.

编辑:为了跟进你想要的行为,我去编辑了你的jsBin; 如果我做得对,新版本应该在这里.

很明显,问题是在错误列表中this.defaultShowErrors()使用jQuery的.show()方法的行为,在这种情况下(如上所述和评论中所讨论的)将设置内联display: block样式.既然我们想要display: inline,我们需要showErrors像这样修改:

showErrors: function (errorMap, errorList) {
    this.defaultShowErrors();
    $.each(errorList, function (i, error) {
        $(error.element).css("display", "inline");
    });
}

这样,无论何时隐藏错误,然后再次显示,我们的自定义showErrors函数都会触发.它们会被display: block瞬间设定this.defaultShowErrors(),但是我们会解决它并将它们设置为display: inline.