Làm cách nào để sử dụng JQuery Validate để tạo cửa sổ bật lên với tất cả lỗi biểu mẫu khi nút gửi được nhấp?

Question

Tôi đang sử dụng plugin Xác thực JQuery để xác thực biểu mẫu phía máy khách. Ngoài kiểu tạo kiểu đầy màu sắc trên các trường biểu mẫu không hợp lệ, khách hàng của tôi yêu cầu hiển thị thông báo bật lên. Tôi chỉ muốn hiển thị thông báo này khi nút gửi được nhấp vì nó sẽ khiến người dùng phát điên nếu không. Tôi đã thử mã sau đây, nhưng errorList luôn trống. Bất cứ ai biết cách chính xác để làm một cái gì đó tương tự.

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'); }, 
    ... 
}); 

Cập nhật Từ các thông tin trong câu trả lời chấp nhận tôi đã đưa ra với điều này.

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

Bạn thực sự nên xem xét sử dụng tùy chọn sau đây cho jQuery Validation

showErrors 

đây là một liên kết đến tài liệu http://docs.jquery.com/Plugins/Validation/validate#options