Jquery Validate resetForm does not clear error messages

Question

I am using tabs to navigate between forms and when the user presses the next button, form validation takes place. If there are errors, it will show the summary of errors at the top and also individual errors at each of the fields. The user corrects the errors, and presses the Next button to advance to the next tab. When the press the previous button, the error messages are not cleared.

How would I clear the error container at the top and the individual error messages at each of the form fields provided that the form is valid when pressing the next button. I have tried the resetForm(), but that didn't 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);

            }



        }    
    });
}); 

Solution

Normally, resetForm() should be removing the default label elements containing the error messages.

Your code:

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`.
}

However, your formID variable only represents the ID of the form so it's not a proper selector. Since your form variable represents the proper selector, $('#'+ formID), you'll need to use form.validate().resetForm() rather than formID.validate().resetForm()

See documentation: jqueryvalidation.org/Validator.resetForm

Comments

[Moxie C]

I have changed my code to form.validate().resetForm();

[Sparky]

@MoxieC, I presumed that you did. I posted this answer so that you could "accept" it and close out the question.

[Moxie C]

I will accept the answer. Does the resetForm take care of the the highlighted error of the fields as well?

[Sparky]

@MoxieC, no, it does not. It just takes care of the default messages, not anything you're doing with highlight and unhighlight.