Question

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

因此，我有两个问题：

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

感谢您的帮助！

Answer 1

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

您可以使用validate plugin的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/

希望有所帮助！

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

1 个答案: