jQuery 验证插件 - 没有错误消息，而是自定义背景答案

【问题标题】：jQuery validation plugin - no error messages instead custom backgroundsjQuery 验证插件 - 没有错误消息，而是自定义背景
【发布时间】：2011-01-02 09:47:03
【问题描述】：

我正在使用 jQuery 验证插件 (http://docs.jquery.com/Plugins/validation)。正在验证的表单具有用于文本输入字段的自定义背景图像，因此我不想为无效字段显示错误消息，而是想更改背景图像。让事情变得有点棘手的是，字段的背景图像位于不同的div 上，绝对位于文本字段的后面（具有透明背景且没有边框）。我将在这里不遗余力地讨论这个设计决定的原因（它与文本字段中的边距有关），但我认为应该提及它，因为它对这个问题至关重要。

因此，我有两个问题：

如何停止显示错误消息？
如果名称字段（例如 <input id=name ... />）无效，那么我如何告诉验证插件，然后它应该更改相关 div 的背景（例如 <div id=name-bg... ></div>）？

感谢您的帮助！

【问题讨论】：

我认为您最好开始创建自己的验证器，这不是那么棘手，而且您还可以实现您想要的。

标签： jquery jquery-validate

【解决方案1】：

如何停止显示错误信息一起出现？

您可以通过使用验证插件的showErrors 选项来完成此操作：

$("#commentForm").validate({
    showErrors: function(errorMap, errorList) {
           /* Custom error-handling code here */
        }
    }
});

errorList 参数是一个对象列表，每个对象都包含一个 element 属性，该属性是有错误的 DOM 元素。

我怎样才能告诉验证插件，例如，名称字段是无效的，那么它应该改变相关 div 的背景？

使用上面详述的showErrors 选项和errorList 参数，您可以这样做：

$("#commentForm").validate({
    showErrors: function(errorMap, errorList) {
        var i, length = errorList.length;
        var el;

        for (i = 0; i < length; i++) {
            el = errorList[i].element;
            /* Build up a selector based on the element containing and error's id:*/
            $("#" + el.id + "-bg").show() // <-- write code against this selector
        }
    }
});

这是一个概念验证：http://jsfiddle.net/vD5cQ/

希望对您有所帮助！

【讨论】：

谢谢安德鲁。完美工作:)