Jquery validation not working on collapsed bootstrap panels

Question

Okay so for my HTML I have this bootstrap collapse and some form fields inside of 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 multiple panels and obviously the form fields where the ... are in the example above.

I then have the form submitting to the jquery validation. If I "open" all the panels above, the validation will work. If I do it like it is supposed to do and only have the last panel open which only has submit button in it, the validation runs like it has no problems. It doesn't see the fields in the collapsed panels?

I have not been able to find any answers on this and hoping the community can help me.

How do I run jquery validation when the bootstrap panels are collapsed?

As per requested I have created a JS Fiddle

As soon as you load the fiddle and try to submit the form (scroll down preview) you will see you get annoying alerts and it tells you the form is missing required fields. This is supposed to happen!

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

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

and re-load the fiddle and then go through the panels and try to submit again, you will notice you don't get any annoying alerts or notifications. Except you get one notification saying the form was submitted.

This is the problem as it's not catching that you didn't put your name or email address in.

Answer 1

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

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

Demo with "ignore: false"

Note: with the above example, you'll not be able to direct the user back to the invalid input fields as they're actually hidden inside collapsed section. You can however "uncollapse" that section, using 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 wouldn't allow the user to "continue" to another section until the current one is filled out and valid. This makes submission process much more clear.

To do so (using your example):

1. Remove data-toggle="collapse" attribute from each "continue" button and add 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>
   

2. Set "continue" buttons click 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 input in current section, using validation rules set for the form:

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

DEMO