Jak używać narzędzia JQuery Validate do tworzenia wyskakującego okna z błędem wszystkich formularzy po kliknięciu przycisku przesyłania?

Question

Używam wtyczki walidacji JQuery do sprawdzania poprawności formularza po stronie klienta. Oprócz kolorowej stylizacji na nieprawidłowych polach formularza, mój klient wymaga wyświetlenia wyskakującego okienka. Chcę wyświetlić tę wiadomość tylko wtedy, gdy przycisk "Wyślij" jest kliknięty, ponieważ w przeciwnym razie użytkownik mógłby doprowadzić użytkownika do szaleństwa. Próbowałem następujący kod, ale errorList jest zawsze pusty. Każdy zna prawidłowy sposób na zrobienie czegoś podobnego.

function popupFormErrors(formId) { 
    var validator = $(formId).validate(); 
    var message = ''; 
    for (var i = 0; i < validator.errorList.length - 1; i++) { 
    message += validator.errorList[i].message + '\n'; 
    } 

    if (message.length > 0) { 
    alert(message); 
    } 
} 

$('#btn-form-submit').click(function(){ 
    $('#form-register').submit(); 
    popupFormErrors('#btn-form-submit'); 
    return false; 
}); 

$('#form-register').validate({ 
    errorPlacement: function(error, element) {/* no room on page */}, 
    highlight: function(element) { $(element).addClass('invalid-input'); }, 
    unhighlight: function(element) { $(element).removeClass('invalid-input'); }, 
    ... 
}); 

Aktualizacja Z informacji w przyjętym odpowiedź wymyśliłem tego.

var submitClicked = false; 

$('#btn-form-submit').click(function() { 
    submitClicked = true; 
    $('#form-register').submit();  
    return false; 
}); 

$('#form-register').validate({ 
    errorPlacement: function(error, element) {/* no room on page */}, 
    highlight: function(element) { $(element).addClass('invalid-input'); }, 
    unhighlight: function(element) { $(element).removeClass('invalid-input'); }, 
    showErrors: function(errorsObj) { 
    this.defaultShowErrors(); 
    if (submitClicked) { 
     submitClicked = false; 
     ... create popup from errorsObj... 
    } 
    } 
    ... 
}); 

Answer 1

Należy naprawdę przyjrzeć przy użyciu następującej opcji dla jQuery Validation

showErrors 

tu jest link do dokumentacji http://docs.jquery.com/Plugins/Validation/validate#options