如何清除jQuery验证错误消息?

I am using the jQuery validation plugin for client side validation. Function editUser() is called on click of 'Edit User' button, which displays error messages.

我正在使用jQuery验证插件进行客户端验证。在单击“编辑用户”按钮时调用函数editUser()，该按钮显示错误消息。

But I want to clear error messages on my form, when I click on 'Clear' button, that calls a separate function clearUser().

但是我想清除表单上的错误消息，当我单击“清除”按钮时，它会调用一个单独的函数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
    }
}

21 个解决方案

#1

You want the resetForm() method:

您需要resetForm()方法:

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

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

I grabbed it from the source of one of their demos.

我从他们的一个演示的来源。

Note: This code won't work for Bootstrap 3.

注意:此代码不适用于Bootstrap 3。

#2

I came across this issue myself. I had the need to conditionally validate parts of a form while the form was being constructed based on steps (i.e. certain inputs were dynamically appended during runtime). As a result, sometimes a select dropdown would need validation, and sometimes it would not. However, by the end of the ordeal, it needed to be validated. As a result, I needed a robust method which was not a workaround. I consulted the source code for jquery.validate.

我自己也遇到过这个问题。我需要在基于步骤构建表单时有条件地验证表单的部分(例如，某些输入在运行时被动态添加)。因此，有时选择下拉菜单需要验证，有时则不需要。然而，在苦难结束时，它需要得到验证。因此，我需要一个健壮的方法，而不是一个变通方法。我查阅了jquery.validate的源代码。

Here is what I came up with:

以下是我的想法:

Clear errors by indicating validation success

通过指示验证成功，清除错误

Call handler for error display

调用处理程序以显示错误

Clear all storage of success or errors

清除所有成功或错误的存储

Reset entire form validation

Here is what it looks like in code:

下面是代码中的代码:

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

minified as a jQuery extension:

缩小为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();

#3

If you want to simply hide the errors:

如果你只想隐藏错误:

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

If you specified the errorClass, call that class to hide instead error (the default) I used above.

如果指定了errorClass，则调用该类来隐藏上面使用的error(默认值)。

#4

If you didn't previously save the validators apart when attaching them to the form you can also just simply invoke

如果您以前在将验证器附加到窗体时没有将它们分开，那么您也可以简单地调用它们

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

as .validate() will return the same validators you attached previously (if you did so).

as .validate()将返回您之前附加的验证器(如果您这样做了)。

#5

Unfortunately, validator.resetForm() does NOT work, in many cases.

不幸的是，在许多情况下，validator.resetForm()不起作用。

I have a case where, if someone hits the "Submit" on a form with blank values, it should ignore the "Submit." No errors. That's easy enough. If someone puts in a partial set of values, and hits "Submit," it should flag some of the fields with errors. If, however, they wipe out those values and hit "Submit" again, it should clear the errors. In this case, for some reason, there are no elements in the "currentElements" array within the validator, so executing .resetForm() does absolutely nothing.

我遇到过这样的情况:如果有人用空值点击表单上的“Submit”，那么它应该忽略“Submit”。没有错误。这是很容易。如果有人输入了一组值，并点击“Submit”，那么它就应该用错误标记一些字段。但是，如果删除这些值并再次单击“Submit”，则应该会清除错误。在这种情况下，由于某些原因，验证器中的“currentElements”数组中没有元素，所以执行. resetform()完全不起作用。

There are bugs posted on this.

上面有bug。

Until such time as they fix them, you need to use Nick Craver's answer, NOT Parrots' accepted answer.

在它们修复它们之前，你需要用Nick Craver的答案，而不是鹦鹉的公认答案。

#6

If you want to do it without using a separate variable then

如果你想不用一个单独的变量来做的话

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

#7

You can use:

您可以使用:

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

#8

If you want just clear validation labels you can use code from jquery.validate.js resetForm()

如果想要清除验证标签，可以使用jquery.validate中的代码。js resetForm()

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

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

#9

I think we just need to enter the inputs to clean everything

我认为我们只需要输入输入数据就可以清理一切

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

#10

For those using Bootstrap 3 code below will clean whole form: meassages, icons and colors...

对于那些使用下面的Bootstrap 3代码的用户，将清理整个表单:meassage、图标和颜色……

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

#11

I tested with:

我测试:

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

It will be ok, when you need to validate it again.

当您需要再次验证它时，它将是ok的。

#12

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

This will destroy all the validation errors

这将破坏所有的验证错误

#13

Try to use this for remove validation on the click on cancel

尝试使用此方法来删除单击取消时的验证。

 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);
                }
            } 
        }

#14

Try to use:

尝试使用:

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

on Clear button.

在明确的按钮。

#15

To remove the validation summary you could write this

要删除验证摘要，可以这样写

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

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

However, once you removed , again if validation failed it won't show this validation summary because you removed it. Instead use hide and display using the below code

但是，一旦您删除了，如果验证失败，它不会显示这个验证摘要，因为您删除了它。相反，使用隐藏和显示下面的代码

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

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

#16

None of the above solutions worked for me. I was disappointed at wasting my time on them. However there is an easy solution.

以上的解决方案对我都不起作用。我对把时间浪费在他们身上感到失望。然而，有一个简单的解决方案。

The solution was achieved by comparing the HTML mark up for the valid state and HTML mark up for the error state.

通过比较有效状态的HTML标记和错误状态的HTML标记，实现了解决方案。

No errors would produce:

没有错误会产生:

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

when an error occurs this div is populated with the errors and the class is changed to validation-summary-errors:

当发生错误时，这个div用错误填充，类被更改为验证-总结-错误:

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

The solution is very simple. Clear the HTML of the div which contains the errors and then change the class back to the valid state.

解决方法非常简单。清除包含错误的div的HTML，然后将类更改为有效状态。

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

Happy coding.

快乐的编码。

#17

If you want to reset numberOfInvalids() as well then add following line in resetForm function in jquery.validate.js file line number: 415.

如果您还想重置numberOfInvalids()，那么在jquery.validate的resetForm函数中添加以下行。js文件行号:415。

this.invalid = {};

#18

I just did

我只是做了

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

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

to remove red border on the input error fields.

删除输入错误字段中的红色边框。

#19

$(FORM_ID).validate().resetForm(); is still not working as expected.

$(FORM_ID). validate().resetForm();仍然没有像预期的那样工作。

I am clearing form with resetForm(). It works in all case except one!!

我正在用resetForm()清除表单。它在任何情况下都有效，只有一个例外!

When I load any form via Ajax and apply form validation after loading my dynamic HTML, then after when I try to reset the form with resetForm() and it fails and also it flushed off all validation I am applying on form elements.

当我通过Ajax加载任何窗体并在加载动态HTML后应用窗体验证时，然后当我尝试用resetForm()重置窗体时，它失败了，它还刷新了我对窗体元素应用的所有验证。

So kindly do not use this for Ajax loaded forms OR manually initialized validation.

因此，请不要在Ajax加载的表单或手动初始化验证时使用此方法。

P.S. You need to use Nick Craver's answer for such scenario as I explained.

注:对于我解释过的情况，你需要用Nick Craver的回答。

#20

In my case helped with approach:

在我的案例中，帮助了方法:

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

#21

If you want to hide a validation in client side that is not part of a form submit you can use the following code:

如果您想在客户端隐藏不属于表单提交的验证，您可以使用以下代码:

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