source

jQuery 유효성 검사 플러그인을 사용하여 요약 및 개별 오류 메시지 표시

goodcode 2023. 8. 24. 22:41
반응형

jQuery 유효성 검사 플러그인을 사용하여 요약 및 개별 오류 메시지 표시

jQuery 플러그인에 대한 개별 오류 메시지와 요약을 표시하려면 어떻게 해야 합니까?

저는 사실 비슷한 질문을 찾았지만, 그것은 제가 사용할 수 있는 몇 가지 후크를 참조할 뿐입니다. 하지만 어디서부터 시작해야 할지 모르겠습니다.

개별 오류 메시지 표시 부분을 받았는데, 제출 시 알림 상자에 요약을 표시해야 하며 플러그인은 여기에서 찾을 수 있습니다.

방금 방법을 알아냈습니다. David의 코드에 감사드리며, 제 후속 질문에 대해 - 경보 상자는 "이름:올바른 이름을 입력하십시오."

아래 코드:

$(document).ready(function() {
    var submitted = false;
    ('.selector').validate({
        showErrors: function(errorMap, errorList) {
            if (submitted) {
                var summary = "You have the following errors: \n";
                $.each(errorMap, function(key, value) {
               summary += key + ': ' + value + "\n";
                });
                alert(summary);
                submitted = false;
            }
            this.defaultShowErrors();
        },
        invalidHandler: function(form, validator) {
            submitted = true;
        }
    });
});

연결된 질문에서 알 수 있듯이,showErrors오류가 표시될 때마다 콜백이 호출됩니다.이를 통해 요약을 만들고 경고할 수 있습니다.그러면 전화할 수 있습니다.this.defaultShowErrors()일반적인 개별 오류 메시지를 표시합니다.

기본적으로 showErrors는 많은 이벤트(제출, 키업, 흐림 등)에 대해 호출됩니다.이러한 기능을 사용하지 않도록 설정하거나 다음을 선택할 수 있습니다.invalidHandler잘못된 양식이 제출된 경우에만 호출되는 메서드입니다.

예:

$(document).ready(function() {
    var submitted = false;
    ('.selector').validate({
        showErrors: function(errorMap, errorList) {
            if (submitted) {
                var summary = "You have the following errors: \n";
                $.each(errorList, function() { summary += " * " + this.message + "\n"; });
                alert(summary);
                submitted = false;
            }
            this.defaultShowErrors();
        },          
        invalidHandler: function(form, validator) {
            submitted = true;
        }
    });
});

다음으로 전달할 수 있는 전체 옵션 목록은 여기를 참조하십시오.validate방법.

언급URL : https://stackoverflow.com/questions/2848765/display-both-summary-and-individual-error-messages-using-the-jquery-validation-p

반응형