Javascript Jquery Validate resetForm未清除错误消息

我使用选项卡在表单之间导航，当用户按下“下一步”按钮时，表单验证就会发生。如果有错误，它将在顶部显示错误摘要，并在每个字段中显示单个错误。用户更正错误，然后按“下一步”按钮前进到下一个选项卡。按下“上一步”按钮时，错误消息不会清除

如果按下“下一步”按钮时表单有效，如何清除顶部的错误容器和每个表单字段中的单个错误消息。我尝试了resetForm（），但没有成功

这是我的密码

<form class="wizardTab" id="graph-data">        
  <div class="alert alert-error" id="alert-form-graph-data"></div>
  <div class="row required" id="frmgraphdata">            
    <fieldset>                 
      <legend>Select below</legend>                   
      <div class="inputgroup" id="select_graph_data">                  
        <label for="graph-only">              
          <input class="required" id="graph-only" name="select_graph_or_data" required="required" type="radio" value="graph-only"/>Graph             
        </label>                   
        <label for="data-only">              
          <input class="required" id="data-only" name="select_graph_or_data" required="required" type="radio" value="data-only"/>Data              
        </label>                            
      </div>            
    </fieldset>      
  </div>                   
  <div class="row buttons">                        
    <input class="btnNext" id="q0_btn_next" type="button" value="Next &gt;"/>                   
  </div>             
</form>  

在下面选择
图表
资料

Jquery代码：

    $('#q0_btn_next').click(function (e) {

        e.preventDefault();

        var formID = $(this).closest('form').attr('id');
        var form = $('#'+ formID);

        if (form.valid()){

           //code to goto the next tab             

           // clear error message
           form.validate().resetForm();

        }


    });

    $('.wizardTab').each(function(){
    $(this).validate({

        onkeyup: false,
        onclick: false,
        onfocusout: false,
        validClass: "success",
        errorClass: "error",
        rules: {
            'select_graph_or_data': {
              required: true
            }
            // more rules for other forms
        },

        invalidHandler: function(form, validator) {

            if (!validator.numberOfInvalids())
                return;

            /*$('html, body').animate({
                scrollTop: $(validator.errorList[0].element).offset().top
                }, 500);*/

        },

        errorPlacement: function (error, element) {

            if (element.parents('.inputgroup').length) {
                error.insertBefore(element.parents('.inputgroup'));
                element.parents('.inputgroup').addClass('error');
            } else {
                error.insertBefore(element);
            };                     
        },

        showErrors: function (errorMap, errorList, currentForm) {

            errors = this.numberOfInvalids();
            var formID = this.currentForm.attributes.id.nodeValue;
            var alrt = $('#alert-form-'+ formID);


            if (errors > 0){

                this.defaultShowErrors();

                var msg = '<p>Your form has errors:</p><ul>'; 

                $.each(errorMap, function(key, value) {
                    msg += '<li><a href="#' + key + '-row" class="error">' + value + '</a></li>';
                });
                msg += '</ul>';                     
                // Show the error in the error summary container
                $('#alert-form-' + formID).html(msg).show();
                $(alrt).html(msg).show();


                $('html, body').animate({ scrollTop: $(alrt).offset().top - 20}, 500);

            }



        }    
    });
}); 

$（'q0_btn_next'）。单击（函数（e）{
e、 预防默认值（）；
var formID=$（this）.closest（'form'）.attr（'id'）；
变量形式=$（“#”+formID）；
if（form.valid（））{
//代码转到下一个选项卡
//清除错误消息
form.validate（）.resetForm（）；
}
});
$（'.wizardTab'）。每个（函数（）{
$（此）。验证({
onkeyup:false，
onclick:false，
onfocusout:false，
validClass:“成功”，
errorClass:“错误”，
规则：{
“选择图形或数据”：{
必填项：true
}
//其他形式的更多规则
},
invalidHandler:函数（表单、验证器）{
如果（！validator.numberOfInvalids（））
返回；
/*$（'html，body'）。设置动画({
scrollTop:$（validator.errorList[0].元素）.offset（）.top
}, 500);*/
},
errorPlacement:函数（错误，元素）{
if（element.parents（'.inputgroup'）.length）{
错误.insertBefore（element.parents（'.inputgroup'））；
element.parents（'.inputgroup'）.addClass（'error'）；
}否则{
错误。insertBefore（元素）；
};                     
},
错误：函数（错误映射、错误列表、当前表单）{
errors=this.numberOfInvalids（）；
var formID=this.currentForm.attributes.id.nodeValue；
var alrt=$（“#警报形式-”+formID）；
如果（错误>0）{
this.defaultRors（）；
var msg='您的表单有错误：
；
$.each（错误映射、函数（键、值）{
味精+='
'；
});
味精+='
'；
//在错误摘要容器中显示错误
$（'#警报表单-'+formID）.html（msg.show（）；
$（alrt.html（msg.show（）；
$（'html，body'）.animate（{scrollTop:$（alrt.offset（）.top-20}，500）；
}
}    
});
}); 

通常，

resetForm（）

应该删除包含错误消息的默认标签元素

您的代码：

var formID = $(this).closest('form').attr('id'); // <- the ID of the form
var form = $('#'+ formID);                       // <- the form object

if (form.valid()){
   formID.validate().resetForm(); // <- should be your `form` variable, not `formID`.
}

---

var formID=$（this）.closest（'form'）.attr（'id'）；//这段代码是你写的还是从什么地方复制的？我这样问是因为解决这个问题所需的代码并不比已经存在的代码复杂。顺便说一句，你提到了一个“previous”按钮，但是在你的HTML标记中没有显示这样的东西。@Sparky我写了代码，但我只复制了部分代码。我可以添加上一个按钮
resetForm（）
是一个jQuery验证方法，仅用于重置表单上的默认错误消息。（将表单放回起始位置。）但是，如果已放置自定义错误摘要，则必须自己清除这些错误摘要。除了
resetForm（）
，只需删除摘要框中的内容即可。我不太清楚你是如何或为什么被困在这里的。@Sparky我已经隐藏了摘要容器，这似乎是可行的。那么您知道为什么resetForm没有在字段级别清除突出显示的错误和错误消息吗？通常，
resetForm（）
应该删除包含错误消息的默认
标签
元素。但是，您的
formID
变量仅表示表单的ID，因此它不是正确的选择器。由于
form
变量表示正确的选择器，
$（'#'+formID）
，因此需要使用
form.validate（）.resetForm（）
而不是
formID.validate（）.resetForm（）
请参阅文档：我已将代码更改为form.validate（）.resetForm（）@莫西克，我想是你干的。我发布了这个答案，这样你就可以“接受”它并结束这个问题。我会接受答案。resetForm是否也会处理字段的突出显示错误？@MoxieC，不，它不会。它只处理默认消息，而不处理您正在使用的
高亮显示
和
取消高亮显示
。