jQuery validation 오류 메시지를 지우는 방법은 무엇입니까?

jQuery validation 오류 메시지를 지우는 방법은 무엇입니까?

저는 고객측 검증을 위해 jQuery validation plugin을 사용하고 있습니다.능.editUser()오류 메시지를 표시하는 '사용자 편집' 버튼을 클릭하면 를 호출합니다.

하지만 양식의 오류 메시지를 지우고 싶습니다. '지우기' 버튼을 클릭하면 별도의 기능이 호출됩니다.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();
});

그들의 데모 중 하나의 출처에서 가져왔습니다.

참고: 이 코드는 부트스트랩 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(기본값) 위에서 사용했습니다.

이전에 양식에 validator를 첨부할 때 별도로 저장하지 않았다면 간단히 호출할 수도 있습니다.

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

~하듯이.validate()이전에 첨부한 것과 동일한 검증자를 반환합니다(확인한 경우).

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

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

불행하게도,validator.resetForm()작동하지 않는 경우가 많습니다.

만약 누군가가 빈 값을 가진 양식의 "제출"을 누른다면, "제출"을 무시해야 하는 경우가 있습니다.오류 없습니다.그 정도면 충분히 쉽습니다.누군가가 값의 일부를 입력하고 "제출"을 누르면 일부 필드에 오류 플래그를 지정해야 합니다.그러나 이러한 값을 삭제하고 "Submit(제출)"을 다시 누르면 오류가 제거됩니다.이 경우 어떠한 이유로 validator 내의 "currentElements" 배열에 요소가 없으므로 실행합니다..resetForm()전혀 도움이 되지 않습니다

여기에 버그가 올라와 있습니다.

그들이 그것들을 고칠 때까지, 여러분은 앵무새의 대답이 아니라 닉 크레이버의 대답을 사용해야 합니다.

다음을 사용할 수 있습니다.

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

테스트 대상:

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

다시 검증을 해야 할 때는 괜찮을 겁니다.

아래의 부트스트랩 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(); });

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

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

저는 aspnet jquery-validation-unobjective를 사용하고 있으며 다음 기능은 저를 위해 유효성 검사 오류를 지웠습니다.

function clearFormValidations(formElement) {
    $(formElement).validate().resetForm();

    // reset unobtrusive validation summary, if it exists
    $(formElement).find("[data-valmsg-summary=true]")
        .removeClass("validation-summary-errors")
        .addClass("validation-summary-valid")
        .find("ul").empty();

    // reset unobtrusive field level, if it exists
    $(formElement).find("[data-valmsg-replace]")
        .removeClass("field-validation-error")
        .addClass("field-validation-valid")
        .empty();
}

용도:

// to clear the errors:
var myForm = document.getElementById('myFormId');
clearFormValidations(myForm);

// to validate again
var validator = $(myForm).validate();
validator.form();

여기서 위의 기능을 찾았습니다.

트래비스 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");
    $(formElement).find(".is-valid").removeClass("is-valid");

}

clearJqValidErrors($("#some_form_id"));

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

이렇게 하면 모든 유효성 검사 오류가 제거됩니다.

접근 방식에 도움이 된 경우:

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

취소 클릭 시 이를 사용하여 유효성 검사를 제거해 보십시오.

 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();"

Clear 버튼에서.

유효성 검사 요약을 제거하려면 다음과 같이 쓸 수 있습니다.

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

해피 코딩.

재설정하려면numberOfInvalids()또한 다음 행을 추가합니다.resetForm기능을 다함jquery.validate.js파일 라인 번호 : 415.

this.invalid = {};

저는 그냥 했어요.

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

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

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

저는 다음과 같은 서식을 정리하고 있습니다.resetForm(). 한가지만 빼고 모든 경우에 효과가 있습니다!!

Ajax를 통해 양식을 로드하고 동적을 로드한 후 양식 유효성 검사를 적용할 때HTML, 그리고 나서 내가 그 양식을 재설정하려고 할 때resetForm()실패하고 양식 요소에 적용하는 모든 유효성 검사를 지워버렸습니다.

그러니 이것을 Ajax loaded form이나 수동으로 초기화된 validation에 사용하지 말아주세요.

추신. 제가 설명한 그런 시나리오는 닉 크레이버의 답변을 이용하셔야 합니다.

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

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

모두가 다른 클래스 이름을 사용하기 때문에 자신만의 코드를 작성합니다.저는 이 코드로 jQuery validation을 재설정하고 있습니다.

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

위에 있는 것 중에 부트스트랩 4에서 작동한 것은 없습니다.이 문제가 해결되었습니다.

$('#formId .invalid-feedback').remove()
$('#formId input').removeClass('is-valid');
$('#formId input').removeClass('is-invalid');

JQuery Validation을 위한 v1.19.0의 경우 다음과 같은 한 줄의 코드가 제게 적합했습니다.

$('.field-validation-error').removeClass('field-validation-error').addClass('field-validation-valid').html('');

실제로 필드가 사용자에게 유효한 것처럼 보이지만 제출을 다시 클릭하면 유효성 검사가 다시 실행됩니다.

다른 사람들이 올린 글을 받아 조금 더 깊이 파고들어 이것을 생각해 냈습니다.내 형태로 나는 추가했습니다.

class="EditProv"

내 모든 것을 다 바쳐요.

var validator = $("#FormEditProvider").validate();
validator.resetForm();
validator.reset();
$('#FormEditProvider .EditProv').removeClass('input-validation-error');
$("[id^=Provider_][id$=error]").html("");

첫번째 줄은 나머지 부분에 필요한 검증기를 발사합니다.두 번째와 세 번째 줄은 "공식적인" 방법입니다.네 번째 줄은 "EditProv" 클래스로 모든 것을 찾고 "input-validation-error"를 클래스에서 제거합니다.마지막으로 다섯 번째 줄은 오류 메시지 텍스트를 지웁니다.내 양식의 경우 jquery validation plugin이 이 span을 추가하거나 수정하고 있었습니다.

<span id="Provider_MedicareNum-error" class=""> 

여기서 "Provider_MedicareNum"은 요소의 ID이며 jquery는 요소에 -error를 추가합니다.

언급URL : https://stackoverflow.com/questions/2086287/how-to-clear-jquery-validation-error-messages