Плагин проверки JQuery - нет сообщений об ошибках вместо пользовательских фонов

Question

Я использую плагин проверки jQuery (http://docs.jquery.com/Plugins/validation). В проверяемой форме есть пользовательские фоновые изображения для полей ввода текста, поэтому вместо отображения сообщения об ошибке для недопустимых полей я бы хотел изменить фон Немного сложнее сделать так, чтобы фоновое изображение для полей находилось в другом div, абсолютно расположенном за текстовым полем (с прозрачным фоном и без рамки). Я не стану вдаваться в причины такого дизайнерского решения. здесь (это связано с полями в текстовом поле), но я подумал, что это следует упомянуть, поскольку это важно для этого вопроса.

Поэтому у меня два вопроса:

1. Как я могу остановить отображение сообщений об ошибках все вместе?

2. Как я могу вместо этого сказать плагину проверки, если, например, поле имени (например, <input id=name ... />) недопустимо, тогда оно должно изменить фон для соответствующего div (например, <div id=name-bg... ></div>)?

Спасибо за любую помощь!

Answer 1

Как я могу остановить отображение сообщений об ошибках все вместе?

Это можно сделать с помощью опции showErrors плагина validate:

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

Надеюсь, это поможет!