Question

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

如果在按下下一个按钮时表单有效，我将如何清除顶部的错误容器以及每个表单字段中的各个错误消息。我尝试过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);

            }



        }    
    });
});

Answer 1

通常，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`.
}

但是，您的formID变量仅代表表单的ID，因此它不是正确的选择器。由于您的form变量代表了正确的选择器$('#'+ formID)，因此您需要使用form.validate().resetForm()而不是formID.validate().resetForm()

请参阅文档：jqueryvalidation.org/Validator.resetForm

Jquery Validate resetForm不会清除错误消息

1 个答案: