제출 단추를 클릭 할 때 JQuery 유효성 검사를 사용하여 모든 양식 오류가있는 팝업을 만드는 방법은 무엇입니까?

Question

클라이언트 측 폼 유효성 검사를 위해 JQuery 유효성 검사 플러그인을 사용하고 있습니다. 유효하지 않은 양식 필드의 화려한 스타일 외에도 내 고객은 팝업 메시지가 표시되도록 요구합니다. 제출 버튼이 클릭되면이 메시지를 보여주고 싶습니다. 그렇지 않으면 사용자를 미치게 만들 것입니다. 다음 코드를 시도했지만 errorList는 항상 비어 있습니다. 누구나 비슷한 것을 할 수있는 올바른 방법을 알고 있습니다. 허용 대답의 정보에서

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

업데이트 나는이 함께했다.

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

당신은 정말 여기에 문서 도움을 http://docs.jquery.com/Plugins/Validation/validate#options