jQuery驗證插件 - 沒有錯誤消息而是自定義背景

Question

我正在使用jQuery驗證插件（ http://docs.jquery.com/Plugins/validation ）。 正在驗證的表單具有文本輸入字段的自定義背景圖像，因此我不想顯示無效字段的錯誤消息，而是要更改背景圖像。 使事情變得有點棘手的是，字段的背景圖像位於文本字段（具有透明背景且沒有邊框）后面的不同div 。 我將在這里考慮這個設計決策的原因（它與文本字段中的邊距有關）但我認為應該提及它，因為它對這個問題至關重要。

因此，我有兩個問題：

1. 如何一起停止顯示錯誤消息？

2. 我怎樣才能告訴驗證插件，例如，如果名稱字段（例如<input id=name ... /> ）無效，那么它應該更改相關div的背景（例如<div id=name-bg... ></div> ）？

謝謝你的幫助！

Answer 1

如何一起停止顯示錯誤消息？

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

希望有所幫助！