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



            }







        }    

    });

});