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

Question

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

因此,我有两个问题:

1. 如何一起停止显示错误消息？

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

谢谢你的帮助!

Answer 1

如何一起停止显示错误消息？

您可以使用showErrorsvalidate插件的选项来完成此操作:

$("#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/

希望有所帮助!