如何清除 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
}
}
329105 次浏览
小开

如果只想隐藏错误:

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

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

小开

尝试使用:

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

清除按钮。

小开
最佳答案

你想要 resetForm()方法:

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


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

我从 他们的小样之一的源头拿到的。

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

小开

我测试了:

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

当你需要再次验证它的时候，一切都会好起来的。

小开

尝试使用此方法在单击“取消”时删除验证

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

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

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

作为 .validate()将返回相同的验证你以前附加(如果你这样做)。

小开

如果你不想使用一个单独的变量，那么

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

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

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

这上面有窃听器。

在他们修好之前，你需要用尼克 · 克雷弗的答案，而不是鹦鹉公认的答案。

小开

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

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


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

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

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

我自己碰到过这个问题。在基于步骤构建表单时，我需要有条件地验证表单的某些部分(即在运行时动态添加某些输入)。因此，有时候选择下拉列表需要验证，有时候则不需要。然而，在考验的最后，它需要被验证。因此，我需要一个健壮的方法，而不是一个变通方法。我查阅了 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();
    • 小开

    你可使用:

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

    要删除验证摘要，可以编写以下代码

    $('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 将填充错误，并且类将更改为 valid- Summary-error:

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

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

    小开

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

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

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

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

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

    对于我解释过的这种情况，您需要使用 Nick Craver 的回答。

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

    这将销毁所有验证错误

    小开

    在我的案例中，这种方法起到了帮助作用:

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

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

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

    方法清除错误文本。但是 如果您想删除 RED 边框从字段中必须删除类 has-error

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

    每个答案都试过了，唯一对我有用的就是:

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

    使用:

    jquery-validate/1.16.0


jquery-validation-unobtrusive/3.2.6/
    小开

    其他的方法对我都不管用。resetForm()清楚地记录了重置实际表单的步骤，例如从表单中删除数据，这不是我想要的。它只是碰巧有时不这样做，但只是删除错误。最终对我奏效的是:

    validator.hideThese(validator.errors());
    小开

    采用 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"));
    小开

    编写自己的代码，因为每个人都使用不同的类名。

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

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

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

    我使用的是 Aspnet jquery-验证-不引人注目，下面的函数为我清除了验证错误:

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

    我找到了上面的函数 给你

    小开

    对于用于 JQuery 验证的1.19.0版本，我发现这一行代码对我很有用:

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

    有效地使字段对于用户看起来是有效的，但是当他们再次单击提交时，验证会重新启动。

    小开

    我把其他人发布的东西挖掘得更深一些，得出了这样的结论: 在我的表格里我加了

    class="EditProv"

    我所有的元素。

    var validator = $("#FormEditProvider").validate();
validator.resetForm();
validator.reset();
$('#FormEditProvider .EditProv').removeClass('input-validation-error');
$("[id^=Provider_][id$=error]").html("");

    第一行触发验证器，您将需要它的其余部分。 第二行和第三行是“官方”的方式。 第四行查找类“ EditProv”的所有内容，并从类中删除“ input-valid- error”。 最后，第五行清除错误消息文本。对于我的表单，jquery 验证插件正在添加或修改这个 span:

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

    其中“ Provider _ MedicareNum”是元素的 id，jquery 将-error 添加到其中。


    提交答案