Jquery Validate resetForm does not clear error messages

Question

I use tabs to move between forms, and when the user clicks the next button, the form is checked. If there are errors, it will display a summary of errors at the top, as well as individual errors in each of the fields. The user corrects the errors and clicks the "Next" button to go to the next tab. Pressing the previous button does not clear the error messages.

How can I clear the error container at the top and the individual error messages in each of the form fields, provided that the form is valid when the next button is clicked. I tried resetForm (), but that did not work.

Here is my code

<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 Code:

    $('#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 , . form , $('#'+ formID), form.validate().resetForm(), formID.validate().resetForm()

. : jqueryvalidation.org/Validator.resetForm