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

我正在使用jQuery验证插件进行客户端验证。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();
});

我从他们的一个演示的源中获取了它。

注意：此代码不适用于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()绝对不任何操作。

有关于此发布的错误。

在他们修复它们之前，您需要使用Nick Craver的答案，而不是Parrots接受的答案。

您可以使用：

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

快乐的编码。

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

this.invalid = {};

我已经做了

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

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

$(FORM_ID).validate().resetForm(); 仍无法正常工作。

我正在用清除表格resetForm()。它可以在所有情况下工作，除了一个！

当我通过Ajax加载任何表单并在加载dynamic之后应用表单验证HTML时，然后尝试重新设置表单后resetForm()失败了，并且它清除了我对表单元素应用的所有验证。

因此，请勿将其用于Ajax加载的表单或手动初始化的验证。

PS：对于我所解释的这种情况，您需要使用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');