jQuery验证插件-没有错误消息，而是自定义背景 [英] jQuery validation plugin - no error messages instead custom backgrounds

问题描述

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

I am using the jQuery validation plugin (http://docs.jquery.com/Plugins/validation). The form which is being validated has custom background images for the text input fields, so instead of showing an error message for invalid fields I would like to change the background image. Making things a bit trickier is that the background image for the fields is on a different div absolutely positioned behind the text field (which has a transparent background and no border). I will spare going into the reasons for this design decision here (it's related to margins within the text field) but I thought it should be mentioned since it is critical to this question.

因此，我有两个问题:

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

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

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

How can I instead tell the validation plugin if, for example, the name field (e.g. <input id=name ... />) is invalid then it should change the background for the relevant div (e.g. <div id=name-bg... ></div>)?

感谢您的帮助！

推荐答案

如何停止显示 一起出现错误消息?

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

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

You can accomplish this by using the showErrors option of the validate plugin:

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

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

The errorList argument is a list of objects, each containing an element property that is the DOM element with the error.

我该如何告诉验证 插件，例如，名称字段 无效，则应更改 相关div的背景?

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参数，您可以像这样完成此操作:

Using the showErrors option and the errorList argument detailed above, you could accomplish this like this:

$("#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验证插件-没有错误消息，而是自定义背景的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！