Функция обратного вызова проверки jQuery

#jquery #jquery-ui #jquery-validate #validation #lightbox

#jquery #jquery-пользовательский интерфейс #jquery-проверка #проверка #лайтбокс

Вопрос:

В настоящее время у меня есть форма в рамке лайтбокса на моей веб-странице. Когда пользователь отправляет форму с неверными данными, в верхней части формы появляется div со списком ошибок формы. Проблема в том, что мне нужен какой-то обратный вызов проверки jQuery, чтобы изменить размер лайтбокса после появления div ошибок. Насколько мне известно, нет способа сделать это с помощью jQuery lightbox.

Ответ №1:

вы должны предоставить недопустимую функцию обратного вызова, которую вы можете найти задокументированной здесь, вот так

 $(".selector").validate({
    invalidHandler: function(form, validator) {
        var errors = validator.numberOfInvalids();
        if (errors) {
            //resize code goes here
        }
    }
})

1. Я предполагаю, что мне не приходило в голову обрабатывать все отображение ошибок и размещение в функции invalidHandler. Спасибо!

2. как бы вы подключили этот обработчик после того, .validate как он уже был инициализирован / вызван?

Ответ №2:

В качестве альтернативы вы можете использовать функцию обратного вызова errorPlacement, чтобы воздействовать на конкретный элемент, который не прошел проверку. В качестве примера приведенный ниже код использует обратный вызов errorPlacement для присвоения классу родительского тега div каждого недопустимого элемента формы значения «error», а затем удаляет класс «error», как только элемент проходит проверку :

 form.validate({
        rules: {
            Name: {
                required: true
            },
            Email: {
                required: true
                , regex: "^[0-9a-zA-Z. _-] @{1}[0-9a-zA-Z. _-] \. [a-zA-Z]{2,4}$"
            }
        },
        messages: {
            Name: {
                required: "Please give us your name"
            },
            Email: {
                regex: "Please enter a valid email address"
            }
        },

        errorPlacement: function(error, element) {
            element.parent().addClass("error");
        },

        success: function(element) {
            $("#"   element.attr("for")).parent().removeClass("error");
        }
    });