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

Question

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

因此，我有两个问题:

1. 如何完全停止显示错误消息？

2. 如果名称字段(例如 <input id=name ... /> )无效，我该如何告诉验证插件它应该更改相关 div 的背景(例如 <div id=name-bg... ></div> )？

感谢您的帮助!

Answer 1

How can I stop the display of the error messages all-together?

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

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

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

How can I instead tell the validation plugin if, for example, the name field is invalid then it should change the background for the relevant 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/

希望有帮助!