[jquery] 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);

jQuery 확장으로 축소 :

$.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();