JQuery validation not working on minimized loading panels

Question

Ok, so for my HTML, I have this bootstrap crash and some form fields inside it.

<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true"> <div class="panel panel-success"> <div class="panel-heading" role="tab" id="generalHeading"> <h4 class="panel-title">General</h4> </div> <div id="generalInfo" class="panel-collapse collapse in" role="tabpanel"> ... </div> </div> </div> 

With several panels and, obviously, form fields in which ... are in the example above.

Then I get a jquery validation form. If I “open” all the panels above, validation will work. If I do it as if it should do, and only the last open panel, which has only the submit button, the check is performed as if it has no problems. He does not see the fields in the folded panels?

I could not find the answers to this and I hope that the community can help me.

How to run jquery validation when dropping bootstrap panels?

As requested, I created a JS script

As soon as you download the violin and try to submit the form (scroll down to view) , you will see that you receive annoying warnings, and it reports that the required fields are not in the form. It must happen!

Now, if you scroll to line 90 in HTML and delete the word in in the class name of the following div:

<div id="priorityInfo" class="panel-collapse collapse in" role="tabpanel">

and reload the violin, and then go through the panels and try sending again, you will notice that you are not receiving any annoying warnings or notifications. In addition, you will receive one notification that the form has been submitted.

This is a problem because you do not catch that you did not provide your name or email address.

Answer 1

As for the question - hidden (and this is what happens when the item is collapsed), the input fields are ignored during the validation process. To avoid this, you can set ignore :

 $("#ticketForm").validate({ ignore: false, // ... 

Demo with "ignore: false"

Note In the above example, you cannot redirect the user back to invalid input fields, since they are really hidden inside the collapsed section. You can, however, "unlock" this section using the invalidHandler callback:

 invalidHandler: function(e,validator) { // loop through the errors: for (var i=0;i<validator.errorList.length;i++){ // "uncollapse" section containing invalid input/s: $(validator.errorList[i].element).closest('.panel-collapse.collapse').collapse('show'); } } 

Demo

---

Personally, I do not allow the user to “continue” another section until the current one is full and valid. This greatly simplifies the feed process.

To do this (using your example):

• Remove the data-toggle="collapse" attribute from each continue button and add the continue class:

   <form id="ticketForm"> <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true"> ... <div class="panel"> ... <div id="generalInfo" class="panel-collapse collapse in" role="tabpanel"> ... <input type="text" name="email" id="email" class="form-control" /> <input type="text" name="name" id="name" class="form-control" /> ... <a href="#" class="btn btn-success pull-right continue">Continue</a> ... </div> ... another section ... </div> </div> </form> 

• Set the continue buttons by clicking the event manually:

   $('.continue').click(function(e){ e.preventDefault(); var sectionValid = true, section = $(this).closest('.panel-collapse.collapse'); // check if fields of this section are valid: $.each(section.find('input, select, textarea'), function(){ if(!$(this).valid()){ sectionValid = false; } }); // toggle sections if fields are valid / show error if they're not: if(sectionValid){ // collapse current section: section.collapse('toggle'); // find and uncollapse next section: section.parents('.panel').next().find('.panel-collapse.collapse').collapse('toggle'); } }); 

  $(this).valid() will return true / false for each entry in the current section using the rules check set for the form:

   $("#ticketForm").validate({ // ... rules: { name: "required", email: { required: true, email: true, }, // ... }, // ... }); 

Demo