Question

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

Answer 1

您需要resetForm()方法：

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

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

我从one of their demos的来源抓住了它。

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

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

Answer 3

如果您只想隐藏错误：

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

如果您指定了errorClass，请将该类调用为隐藏error（我在上面使用的默认值）。

Answer 4

如果您之前没有将验证器与表单相关联，那么您也可以只调用

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

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

Answer 5

如果你想在不使用单独变量的情况下进行，那么

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

Answer 6

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

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

此处发布了错误。

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

Answer 7

您可以使用：

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

Answer 8

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

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

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

Answer 9

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

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

Answer 10

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

Answer 11

我测试过：

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

当你需要再次验证时，它会没问题。

Answer 12

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

这会破坏所有验证错误

Answer 13

没有其他解决方案对我有用。 resetForm()已清楚地记录在案以重设实际的表格，例如从表单中删除数据，这不是我想要的。碰巧有时不这样做，而只是删除错误。最终对我有用的是：

validator.hideThese(validator.errors());

Answer 14

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

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

Answer 15

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

this.invalid = {};

Answer 16

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

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

使用：

jquery-validate/1.16.0

jquery-validation-unobtrusive/3.2.6/

Answer 17

使用 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"));

Answer 18

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

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

Answer 19

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

x = txt.split(",")# remove the extra space

Answer 20

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

Answer 21

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

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

实际上使该字段对用户显得有效，但是当用户再次单击“提交”时，验证就会重新生效。

Answer 22

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

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

Answer 23

在我的案例中帮助了方法：

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

Answer 24

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

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

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

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

P.S。您需要使用 Nick Craver的答案来解决我所解释的情况。

Answer 25

我刚刚做了

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

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

Answer 26

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

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

快乐的编码。

Answer 27

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

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

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

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

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

Answer 28

尝试使用此功能在点击取消

时删除验证

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

Answer 29

尝试使用：

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

清除按钮。

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

29 个答案: