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


How to clear jQuery validation error messages?

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

但是我想在我的表单上清除错误消息，当我点击"清除"按钮时，它会调用一个单独的函数clearUser()。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
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()方法：

1
2
3
4
5
6
7
8
var validator = $("#myform").validate(
   ...
   ...
);

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

我从他们的一个演示的源头抓住了它。

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

相关讨论

我自己遇到过这个问题。我需要在根据步骤构建表单时有条件地验证表单的各个部分(即在运行时动态附加某些输入)。因此，有时选择下拉列表需要验证，有时则不需要验证。但是，在考验结束时，需要进行验证。因此，我需要一种强大的方法，而不是一种解决方法。我查阅了jquery.validate的源代码。

这是我想出的：

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

  • 调用错误显示处理程序

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

  • 重置整个表单验证

    这是代码中的样子：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    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扩展：

    1
    2
    3
    $.fn.clearValidation = function(){var v = $(this).validate();$('[name]',this).each(function(){v.successList.push(this);v.showErrors();});v.resetForm();v.reset();};
    //used:
    $("#formId").clearValidation();
    相关讨论

    如果您只想隐藏错误：

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

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

    相关讨论

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

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

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

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

    1
    $("#myForm").data('validator').resetForm();
    相关讨论

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

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

    这上面有bug。

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

    您可以使用：

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

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

    1
    2
    3
    4
    5
    6
    var validator = $('#Form').validate();

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

    我想我们只需要输入输入来清理所有东西

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

    对于那些使用Bootstrap 3的代码，下面将清理整个表单：消息，图标和颜色......

    1
    2
    3
    4
    5
    $('.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(); });

    我测试过：

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

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

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

    1
    validator.hideThese(validator.errors());
    1
    2
    var validator = $("#myForm").validate();
    validator.destroy();

    这将破坏所有验证错误

    尝试使用：

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

    在清除按钮上。

    尝试使用此功能在点击取消时删除验证

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
     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);
                    }
                }
            }
    相关讨论

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

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

    不会产生任何错误：

    1
     

    当发生错误时，此div将填充错误，并且类将更改为validation-summary-errors：

    1
     

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

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

    快乐的编码。

    功能使用Travis J，JLewkovich和Nick Craver的方法......

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    // 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"));

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

    1
    this.invalid = {};

    我已经做了

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

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

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

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

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

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

    附：你需要使用Nick Craver的答案，就像我解释的那样。

    在我的情况下帮助方法：

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

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

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

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

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

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

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

    使用：

    1
    2
    3
    jquery-validate/1.16.0

    jquery-validation-unobtrusive/3.2.6/

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

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

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

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

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