Question

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

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

Answer 1

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

编辑以跟进获得您想要的行为，我去编辑了您的jsBin;如果我做得对，新版本应为here。

很明显问题是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。

Answer 2

对于其他任何人，我使用以下“黑客”解决了这个问题。如果有更干净的方式，请告诉我。

http://jsbin.com/agexa3/10/

Answer 3

您可以使用

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

Answer 4

这是一个很好的解决方案（感谢Damilare和Domenic）

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

但是，如果这不起作用，请检查结构。 $（error.element）是有错误的控件。 “.next”是它的下一个兄弟。在我的情况下，这个兄弟是一个，它的第一个孩子是span.error标签。例如，使用这种表示法：

$(error.element).next().children(':first-child').css("display", "inline");

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

4 个答案: