Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Jquery Validate resetForm does not clear error messages

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

            }



        }    
    });
}); 
like image 977
Moxie C Avatar asked Jun 03 '14 18:06

Moxie C


People also ask

How to clear jQuery validation error messages?

removeClass('valid'); // display OK icon $(element). closest('. form-group'). addClass('has-error'); // add the Bootstrap error class to the control group }, unhighlight: function (element) { // revert the change done by hightlight $(element).

How to remove input validation error in javascript?

Hi Mohamed Antar, Just add this on your input widget in Extended properties : So after the Validation Error Message, the moment you start typing in the input - validation message will be removed.

What is jQuery validate unobtrusive JS?

An unobtrusive validation in jQuery is a set of ASP.Net MVC HTML helper extensions.By using jQuery Validation data attributes along with HTML 5 data attributes, you can perform validation to the client-side.

What is validator addMethod in jQuery?

addMethod( name, method [, message ] ) Description: Add a custom validation method. It must consist of a name (must be a legal javascript identifier), a javascript based function and a default string message.


1 Answers

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

like image 173
Sparky Avatar answered Sep 20 '22 00:09

Sparky