如何清除jQueryvalidation错误消息?

我正在使用jQueryvalidation插件进行客户端validation。 点击“编辑用户”button,调用editUser()函数,显示错误信息。

但是我想清除我的表单上的错误消息,当我点击“清除”button,调用一个单独的函数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。

我自己遇到这个问题。 我需要有条件地validation窗体的一部分,而窗体是基于步骤构build的(即某些input在运行时dynamic添加)。 因此,有时select下拉列表需要validation,有时候不会。 然而,在考验结束之前,这需要得到validation。 因此,我需要一个健全的方法,这不是一个解决方法。 我咨询了jquery.validate的源代码。

这是我想出来的:

  • 通过指示validation成功来清除错误
  • 调用处理程序的错误显示
  • 清除成功或错误的所有存储
  • 重置整个表单validation
  • 这是代码中的样子:

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

    如果你想简单地隐藏错误:

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

    如果你指定了errorClass ,那么调用这个类来隐藏我上面使用的error (默认)。

    如果您以前没有将validation程序附加到表单中,可以直接调用

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

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

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

    我有一个情况,如果有人在空白值的表单上点击“提交”,它应该忽略“提交”。 没有错误。 这很容易。 如果有人input部分值,并点击“提交”,它应该标记一些错误的字段。 但是,如果他们将这些值清除并再次点击“提交”,则应清除错误。 在这种情况下,出于某种原因,validation程序中的“currentElements”数组中没有元素,因此执行.resetForm()完全没有任何作用。

    有这个bug发布。

    在他们解决这些问题之前,你需要使用Nick Craver的答案,而不是鹦鹉接受的答案。

    如果你想这样做,而不使用一个单独的variables

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

    如果你只想清除validation标签,你可以使用jquery.validate.js中的代码resetForm()

     var validator = $('#Form').validate(); validator.submitted = {}; validator.prepareForm(); validator.hideErrors(); validator.elements().removeClass(validatorObject.settings.errorClass); 

    您可以使用:

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

    我想我们只需要inputinput来清理一切

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

    对于那些使用下面的Bootstrap 3代码将清理整个forms:meassages,图标和颜色…

     $('.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(); }); 

    我testing了:

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

    这样可以,当你需要再次validation时。

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

    这将破坏所有validation错误

    尝试使用这个删除点击取消validation

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

    清除button上。

    要删除validation摘要,你可以写这个

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

    但是,一旦你删除,再次如果validation失败,它不会显示此validation摘要,因为你删除它。 而是使用下面的代码隐藏和显示

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

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

    解决scheme是通过比较有效状态的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"> 

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

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

    快乐的编码。

    如果你想重置numberOfInvalids() ,那么在jquery.validate.js文件行号:415的resetForm函数中join如下一行:

     this.invalid = {}; 

    我已经做了

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

    删除input错误字段的红色边框。

    $(FORM_ID).validate().resetForm(); 仍然没有按预期工作。

    我正在用resetForm()清除表单。 它在所有情况下工作,除了一个!

    当我加载任何forms通过Ajax和加载我的dynamicHTML后应用表单validation,然后当我尝试用resetForm()重置表单,并且它失败,也刷新了我在表单元素上应用的所有validation。

    所以请不要使用Ajax加载的表单或手动初始化validation。

    PS你需要使用Nick Craver的回答来解释这种情况。