带有内联块错误的 jQuery 验证

Question

我的验证脚本工作正常，但我使用了内联块错误并隐藏了它们。当 jQuery Validation 插件将它们切换回来时，我猜它使用 show 会根据标签抛出内联 display:block 或 display:inline 样式。我需要做的是让它显示：inline-block。有没有办法在 jQuery Validate 显示错误后将 css 选择器附加到每个字段？

这是一个sn-p。

$(document).ready(function() {
$("#applicationForm").validate({
    errorElement: 'span',   
    errorContainer: $('.error'),
    rules: {
        email: {
            required: true,
            email: true
        },
        emailVerify: {
            required:true,
            email:true,
            equalTo: "#email"
        }
    }
});
});

Answer 1

我不是 100% 清楚您需要做什么，但您可以通过实现 showErrors 函数来覆盖验证插件如何处理显示错误。

默认的看起来基本上是这样的：

showErrors: function(errorMap, errorList) {
    for (var i = 0; this.errorList[i]; i++) {
        var error = this.errorList[i];
        this.showLabel(error.element, error.message);

        this.settings.highlight && this.settings.highlight.call(this, error.element, this.settings.errorClass, this.settings.validClass);
    }
    if (this.errorList.length) {
        this.toShow = this.toShow.add(this.containers);
    }
    if (this.settings.success) {
        for (var i = 0; this.successList[i]; i++) {
            this.showLabel(this.successList[i]);
        }
    }
    if (this.settings.unhighlight) {
        for (var i = 0, elements = this.validElements(); elements[i]; i++) {
            this.settings.unhighlight.call(this, elements[i], this.settings.errorClass, this.settings.validClass);
        }
    }
    this.toHide = this.toHide.not(this.toShow);
    this.hideErrors();
    this.addWrapper(this.toShow).show();
}

听起来您的偏好是将最后一行更改为其他内容。

实现invalidHandler 并让该函数查找错误元素并适当地更改它们的显示属性可能更简单。