jQuery 유효성 검사 오류 메시지를 지우는 방법?

클라이언트 측 유효성 검사를 위해 jQuery 유효성 검사 플러그인을 사용하고 있습니다. editUser()오류 메시지를 표시하는 '사용자 편집'버튼을 클릭하면 기능 이 호출됩니다.

그러나 'Clear'버튼을 클릭하면 별도의 함수를 호출하는 양식의 오류 메시지를 지우고 싶습니다 clearUser().

function clearUser() {
    // Need to clear previous errors here
}

function editUser(){
    var validator = $("#editUserForm").validate({
        rules: {
            userName: "required"
        },
        errorElement: "span",
        messages: {
            userName: errorMessages.E2
        }
    });

    if(validator.form()){
        // Form submission code
    }
}

당신은 resetForm()방법을 원한다 :

var validator = $("#myform").validate(
   ...
   ...
);

$(".cancel").click(function() {
    validator.resetForm();
});

나는 그들의 데모 중 하나의 출처에서 그것을 움켜 쥐었다 .

참고 :이 코드는 Bootstrap 3에서 작동하지 않습니다.

나는이 문제를 직접 만났다. 양식을 단계에 따라 구성하는 동안 양식의 일부를 조건부로 유효성 검증해야했습니다 (예 : 특정 입력이 런타임 중에 동적으로 추가됨). 결과적으로 선택 드롭 다운에 유효성 검사가 필요한 경우도 있고 그렇지 않은 경우도 있습니다. 그러나 시련이 끝날 무렵에는 검증이 필요했습니다. 결과적으로 해결 방법이 아닌 강력한 방법이 필요했습니다. 에 대한 소스 코드를 참조했습니다 jquery.validate.

다음은 내가 생각해 낸 것입니다.

function clearValidation(formElement){
 //Internal $.validator is exposed through $(form).validate()
 var validator = $(formElement).validate();
 //Iterate through named elements inside of the form, and mark them as error free
 $('[name]',formElement).each(function(){
   validator.successList.push(this);//mark as error free
   validator.showErrors();//remove error messages if present
 });
 validator.resetForm();//remove error class on name elements and clear history
 validator.reset();//remove all error and success data
}
//used
var myForm = document.getElementById("myFormId");
clearValidation(myForm);

$.fn.clearValidation = function(){var v = $(this).validate();$('[name]',this).each(function(){v.successList.push(this);v.showErrors();});v.resetForm();v.reset();};
//used:
$("#formId").clearValidation();

단순히 오류를 숨기려면 다음을 수행하십시오.

$("#clearButton").click(function() {
  $("label.error").hide();
  $(".error").removeClass("error");
});

을 지정한 경우 위에서 사용했던 기본 errorClass클래스 대신 숨기려면 해당 클래스를 호출 error하십시오.

폼에 첨부 할 때 유효성 검사기를 이전에 저장하지 않은 경우 단순히 호출 할 수 있습니다

$("form").validate().resetForm();

로 .validate()같은 유효성 검사기를 반환합니다 (당신이 그렇게 한 경우) 이전에 부착.

별도의 변수를 사용하지 않고하고 싶다면

$("#myForm").data('validator').resetForm();

불행히도 validator.resetForm()많은 경우에 작동하지 않습니다.

빈 값이있는 양식에서 누군가 "제출"을 누르면 "제출"을 무시해야하는 경우가 있습니다. 오류가 없습니다. 충분히 쉽습니다. 누군가 값의 일부를 입력하고 "제출"을 누르면 일부 필드에 오류가 표시됩니다. 그러나 해당 값을 지우고 "제출"을 다시 누르면 오류가 해결됩니다. 이 경우 어떤 이유로 유효성 검사기의 "currentElements"배열에 요소가 없으므로 실행 .resetForm()은 전혀 수행 하지 않습니다.

여기에 버그가 게시되어 있습니다.

문제가 해결 될 때까지 Parrots의 대답이 아닌 Nick Craver의 대답을 사용해야합니다.

당신이 사용할 수있는:

$("#myform").data('validator').resetForm();

모든 것을 청소하기 위해 입력을 입력하면된다고 생각합니다

$("#your_div").click(function() {
  $(".error").html('');
  $(".error").removeClass("error");
});

유효성 검사 레이블을 지우려면 jquery.validate.js resetForm ()의 코드를 사용할 수 있습니다

var validator = $('#Form').validate();

validator.submitted = {};
validator.prepareForm();
validator.hideErrors();
validator.elements().removeClass(validatorObject.settings.errorClass);

아래의 Bootstrap 3 코드를 사용하는 사람들은 메시지, 아이콘 및 색상 ...

$('.form-group').each(function () { $(this).removeClass('has-success'); });
$('.form-group').each(function () { $(this).removeClass('has-error'); });
$('.form-group').each(function () { $(this).removeClass('has-feedback'); });
$('.help-block').each(function () { $(this).remove(); });
$('.form-control-feedback').each(function () { $(this).remove(); });

나는 다음과 같이 테스트했다.

$("div.error").remove();
$(".error").removeClass("error");

다시 확인해야 할 때 괜찮습니다.

var validator = $("#myForm").validate();
validator.destroy();

이것은 모든 유효성 검사 오류를 파괴합니다

내 경우에는 접근 방식에 도움이되었습니다.

$(".field-validation-error span").hide();

양식 제출의 일부가 아닌 클라이언트 측에서 유효성 검증을 숨기려면 다음 코드를 사용할 수 있습니다.

$(this).closest("div").find(".field-validation-error").empty();
$(this).removeClass("input-validation-error");

모든 단일 답변을 시도했습니다. 나를 위해 일한 유일한 것은 :

$("#editUserForm").get(0).reset();

사용 :

jquery-validate/1.16.0

jquery-validation-unobtrusive/3.2.6/

다른 솔루션 중 어느 것도 나를 위해 일하지 않았습니다. resetForm()실제 양식을 재설정하기 위해 명확하게 문서화되어 있습니다. 예를 들어 양식에서 데이터를 제거하십시오. 때로는 그렇게하지 않고 오류를 제거합니다. 마침내 나를 위해 일한 것은 이것입니다.

validator.hideThese(validator.errors());

취소를 클릭 할 때 유효성 검사를 제거하기 위해 이것을 사용하십시오.

 function HideValidators() {
            var lblMsg = document.getElementById('<%= lblRFDChild.ClientID %>');
            lblMsg.innerHTML = "";           
            if (window.Page_Validators) {
                for (var vI = 0; vI < Page_Validators.length; vI++) {
                    var vValidator = Page_Validators[vI];
                    vValidator.isvalid = true;
                    ValidatorUpdateDisplay(vValidator);
                }
            } 
        }

사용하십시오 :

onClick="$('.error').remove();"

지우기 버튼을 클릭하십시오.

유효성 검사 요약을 제거하려면 다음을 작성할 수 있습니다.

$('div#errorMessage').remove();

그러나을 제거한 후에 다시 유효성 검사에 실패하면이 유효성 검사 요약이 제거되었으므로이 유효성 검사 요약이 표시되지 않습니다. 대신 아래 코드를 사용하여 숨기기 및 표시를 사용하십시오.

$('div#errorMessage').css('display', 'none');

$('div#errorMessage').css('display', 'block');  

위의 해결책 중 어느 것도 나를 위해 일하지 않았습니다. 나는 그들에게 시간을 낭비하는 것에 실망했다. 그러나 쉬운 해결책이 있습니다.

솔루션은 유효한 상태에 대한 HTML 마크 업과 오류 상태에 대한 HTML 마크 업을 비교하여 달성되었습니다.

오류가 발생하지 않습니다.

        <div class="validation-summary-valid" data-valmsg-summary="true"></div>

오류가 발생하면이 div에 오류가 채워지고 클래스가 validation-summary-errors로 변경됩니다.

        <div class="validation-summary-errors" data-valmsg-summary="true"> 

해결책은 매우 간단합니다. 오류가 포함 된 div의 HTML을 지우고 클래스를 다시 유효한 상태로 변경하십시오.

        $('.validation-summary-errors').html()            
        $('.validation-summary-errors').addClass('validation-summary-valid');
        $('.validation-summary-valid').removeClass('validation-summary-errors');

행복한 코딩.

재설정하려면 파일 행 번호에 415 함수 numberOfInvalids()를 추가하십시오 .resetFormjquery.validate.js

this.invalid = {};

난 그냥했다

$('.input-validation-error').removeClass('input-validation-error');

입력 오류 필드에서 빨간색 테두리를 제거합니다.

$(FORM_ID).validate().resetForm(); 여전히 예상대로 작동하지 않습니다.

로 양식을 지우고 있습니다 resetForm(). 하나를 제외한 모든 경우에 작동합니다!

Ajax를 통해 양식을로드하고 dynamic을로드 한 후 양식 유효성 검사를 적용 HTML하면 양식을 재설정하려고 시도 resetForm()하면 실패하고 양식 요소에 적용하는 모든 유효성 검사가 해제됩니다.

따라서 Ajax로로드 된 폼이나 수동으로 초기화 된 유효성 검사에는 이것을 사용하지 마십시오.

추신 당신 은 내가 설명한 시나리오에 대해 Nick Craver의 대답 을 사용해야 합니다.

validator.resetForm()메소드 지우기 오류 텍스트. 그러나 필드 에서 빨간색 테두리 를 제거하려면 클래스를 제거해야합니다has-error

$('#[FORM_ID] .form-group').removeClass('has-error');

Travis J , JLewkovich 및 Nick Craver 의 접근 방식을 사용하는 기능 ...

// NOTE: Clears residual validation errors from the library "jquery.validate.js". 
// By Travis J and Questor
// [Ref.: https://stackoverflow.com/a/16025232/3223785 ]
function clearJqValidErrors(formElement) {

    // NOTE: Internal "$.validator" is exposed through "$(form).validate()". By Travis J
    var validator = $(formElement).validate();

    // NOTE: Iterate through named elements inside of the form, and mark them as 
    // error free. By Travis J
    $(":input", formElement).each(function () {
    // NOTE: Get all form elements (input, textarea and select) using JQuery. By Questor
    // [Refs.: https://stackoverflow.com/a/12862623/3223785 , 
    // https://api.jquery.com/input-selector/ ]

        validator.successList.push(this); // mark as error free
        validator.showErrors(); // remove error messages if present
    });
    validator.resetForm(); // remove error class on name elements and clear history
    validator.reset(); // remove all error and success data

    // NOTE: For those using bootstrap, there are cases where resetForm() does not 
    // clear all the instances of ".error" on the child elements of the form. This 
    // will leave residual CSS like red text color unless you call ".removeClass()". 
    // By JLewkovich and Nick Craver
    // [Ref.: https://stackoverflow.com/a/2086348/3223785 , 
    // https://stackoverflow.com/a/2086363/3223785 ]
    $(formElement).find("label.error").hide();
    $(formElement).find(".error").removeClass("error");

}

clearJqValidErrors($("#some_form_id"));

모두가 다른 클래스 이름을 사용하기 때문에 자신의 코드를 작성하십시오. 이 코드로 jQuery 유효성 검사를 재설정하고 있습니다.

$('.error').remove();
        $('.is-invalid').removeClass('is-invalid');