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

【问题标题】：How to clear jQuery validation error messages?如何清除 jQuery 验证错误消息？
【发布时间】：2010-01-18 13:29:58
【问题描述】：

我正在使用 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
    }
}

【问题讨论】：

标签： jquery jquery-validate

【解决方案1】：

你想要resetForm() 方法：

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

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

我是从one of their demos的来源抓取的。

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

【讨论】：

对于那些使用引导程序的人，在某些情况下resetForm() 不会清除表单子元素上.error 的所有实例。除非您调用 .removeClass()，否则这将留下像红色文本颜色这样的残留 CSS。示例：$('#myform .control-group').removeClass('error');
使用 bootstrap 3 这不会隐藏字段验证错误。真可惜。
它适用于我的 Bootstrap 3。也许问题在于您对两个库的集成？
不，这个 resetForm 甚至也可以保留表单数据。
@JLewkovich 所说的使用 bootstrap3 是正确的，必须实现手动重置跳转到检查器并确定哪些类适用于错误

【解决方案2】：

我自己也遇到过这个问题。在基于步骤构建表单时，我需要有条件地验证表单的某些部分（即某些输入是在运行时动态附加的）。因此，有时选择下拉菜单需要验证，有时则不需要。然而，在考验结束时，它需要得到验证。因此，我需要一种稳健的方法，而这不是一种解决方法。我查阅了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();

【讨论】：

太好了，这个解决方案也适用于“ValidationMessageFor”
太棒了！与 Bootstrap 和 MVC 完美配合！
首先，谢谢！多年来一直很好用，但现在我发现了一个性能问题：showErrors 进行了一些 DOM 操作，并为表单中的每个元素调用它。在具有约 30 个控件的表单上使用此代码时，浏览器冻结了几秒钟。我的解决方案是将showErrors 移出循环，并在validator.resetForm 之前调用它一次。据我所知，它的行为方式完全相同，而且速度要快得多。
我一直在使用这个直到今天我发现如果我在“重置”按钮上使用这个方法，它会删除所有错误但不再验证......即使我尝试再次验证，一切都有效

【解决方案3】：

如果您想简单地隐藏错误：

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

如果您指定了errorClass，则调用该类来隐藏而不是error（我在上面使用的默认值）。

【讨论】：

@mark - 正确，但它并非旨在...它们仍然无效，我们只是在这种情况下隐藏错误消息。对于您特别想要隐藏（不忽略，例如不允许提交）错误的情况，这是可接受的答案的替代方法。它出现的频率比你想象的要多：)
问题是当您重新设置表单并再次编辑时。我的错误对话框显示错误计数，并且计数只是不断总结。即使是“resetForm”也无济于事。
即使我这样做了，但它会导致另一个问题。下次打开对话框时验证不会应用！
这项技术在 Bootstrap 3 网站上对我有用。只需将错误类更改为以下内容：$(".has-error").removeClass("has-error");

【解决方案4】：

如果您之前在将验证器附加到表单时没有将它们分开保存，您也可以简单地调用

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

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

【讨论】：

工作，但如果输入字段中有十字符号，那么您还添加了 $('.is-invalid').removeClass('is-invalid');

【解决方案5】：

如果你想在不使用单独变量的情况下这样做

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

【讨论】：

【解决方案6】：

很遗憾，validator.resetForm() 在很多情况下都不起作用。

我有一种情况，如果有人在具有空白值的表单上点击“提交”，它应该忽略“提交”。没有错误。这很容易。如果有人输入了部分值，然后点击“提交”，它应该标记一些有错误的字段。但是，如果他们清除了这些值并再次点击“提交”，它应该清除错误。在这种情况下，由于某种原因，验证器中的“currentElements”数组中没有元素，因此执行.resetForm() 绝对不会执行任何操作。

在此发布了错误。

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

【讨论】：

只有在 JavaScript 世界中，这才是可接受的状态。

【解决方案7】：

你可以使用：

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

【讨论】：

【解决方案8】：

我认为我们只需要输入输入来清理所有内容

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

【讨论】：

【解决方案9】：

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

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

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

【讨论】：

【解决方案10】：

我测试过：

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

没关系，当你需要再次验证时。

【讨论】：

【解决方案11】：

对于那些使用 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(); });

【讨论】：

【解决方案12】：

尝试了每一个答案。唯一对我有用的是：

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

使用：

jquery-validate/1.16.0

jquery-validation-unobtrusive/3.2.6/

【讨论】：

【解决方案13】：

使用 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");
    $(formElement).find(".is-valid").removeClass("is-valid");

}

clearJqValidErrors($("#some_form_id"));

【讨论】：

我必须在最后添加一行新代码才能正常工作：$(formElement).find(".is-valid").removeClass("is-valid");跨度>

【解决方案14】：

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

这会破坏所有的验证错误

【讨论】：

【解决方案15】：

在我的情况下帮助了方法：

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

【讨论】：

其他答案均无效，但您的答案效果很好，谢谢

【解决方案16】：

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

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

【讨论】：

【解决方案17】：

其他解决方案都不适合我。 resetForm() 已明确记录以重置实际表单，例如从表单中删除数据，这不是我想要的。它只是碰巧有时不这样做，而只是删除错误。最终对我有用的是：

validator.hideThese(validator.errors());

【讨论】：

【解决方案18】：

我正在使用aspnet jquery-validation-unobtrusive，以下函数为我清除了验证错误：

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

找到上面的函数here

【讨论】：

我的代码删除字段 StreetNumber 上的错误消息：$("[data-valmsg-for='StreetNumber'] span").removeClass("field-validation-error").addClass ("field-validation-valid").empty().css("padding", "0");

【解决方案19】：

尝试在单击取消时使用它来删除验证

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

【讨论】：

这个功能在取消按钮上起作用，你还想在哪里使用这个是好的。试试吧

【解决方案20】：

尝试使用：

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

在清除按钮上。

【讨论】：

【解决方案21】：

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

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

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

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

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

【讨论】：

【解决方案22】：

以上解决方案都不适合我。我对在他们身上浪费时间感到失望。但是有一个简单的解决方案。

通过比较有效状态的 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');

编码愉快。

【讨论】：

【解决方案23】：

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

this.invalid = {};

【讨论】：

【解决方案24】：

我刚刚做了

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

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

【讨论】：

【解决方案25】：

$(FORM_ID).validate().resetForm(); 仍未按预期工作。

我正在使用resetForm() 清除表单。它适用于所有情况，除了一种！

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

所以请不要将它用于 Ajax 加载的表单或手动初始化验证。

P.S.对于我解释的这种情况，您需要使用 Nick Craver 的答案。

【讨论】：

【解决方案26】：

validator.resetForm() 方法清除错误文本。但是如果你想从字段中删除红色边框，你必须删除类has-error

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

【讨论】：

【解决方案27】：

编写自己的代码，因为每个人都使用不同的类名。我正在通过这段代码重置 jQuery 验证。

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

【讨论】：

【解决方案28】：

以上都不适用于引导程序 4。这为我解决了问题：

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

【讨论】：

【解决方案29】：

对于用于 JQuery 验证的 v1.19.0，我发现这行代码对我有用：

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

实际上使该字段对用户显示有效，但当他们再次单击提交时，验证会重新触发。

【讨论】：

【解决方案30】：

我拿了其他人发布的内容并深入挖掘并想出了这个：在我的表格中我添加了

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 验证插件正在添加或修改这个 span：

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

其中“Provider_MedicareNum”是元素的 id，jquery 将 -error 添加到它。

【讨论】：