Jquery-Validierung funktioniert nicht bei minimierten Bootstrap-Panels

Question

Okay, also für mein HTML habe ich dieses Bootstrap-Kollaps und einige Formularfelder darin.

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

Mit mehreren Platten und natürlich die Formularfelder, wo die ... im Beispiel oben sind.

Ich habe dann das Formular zur Übergabe an die Jquery-Validierung. Wenn ich alle oben genannten Fenster "öffne", funktioniert die Validierung. Wenn ich es so mache, wie es sollte, und nur das letzte Panel geöffnet habe, das nur den Submit-Button enthält, läuft die Validierung so, als hätte es keine Probleme. Die Felder in den minimierten Feldern werden nicht angezeigt?

Ich konnte keine Antworten darauf finden und hoffe, dass die Community mir helfen kann.

Wie führe ich die Jquery-Validierung aus, wenn die Bootstrap-Panels zusammengebrochen sind?

Wie gewünscht pro ich ein JS Fiddle

Sobald erstellt haben, wie Sie die Geige laden und versuchen, das Formular abzuschicken (nach unten scrollen Vorschau) Sie werden sehen, Sie nervige Warnungen erhalten und es sagt Ihnen das Formular fehlende PflichtfelderDas soll passieren!

Nun, wenn Sie in der HTML-line 90 blättern und das Wort in auf dem Klassennamen des folgenden div entfernen:

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

und die Geige neu laden und dann die Platten durch und versuchen Sie es erneut, Sie werden feststellen, dass Sie keine lästigen Warnungen oder Benachrichtigungen erhalten. Außer Sie erhalten eine Benachrichtigung, dass das Formular gesendet wurde.

Das ist das Problem, da es nicht ist ansteckend, dass Sie nicht in Ihrem Namen oder E-Mail-Adresse gelegt hat

Answer 1

Was die Frage -. Versteckt (und das ist das, was passiert, wenn das Element ausgeblendet ist) Eingabefelder sind im Validierungsprozess ignoriert. Um dies zu vermeiden, können Sie ignore Option:

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

Demo with "ignore: false"

Hinweis: mit dem obigen Beispiel, werden Sie nicht in der Lage sein, den Benutzer zurück zu den ungültigen Eingabefeldern zu lenken, wie sie‘ Re tatsächlich versteckt in collapsed Abschnitt. Sie können jedoch „uncollapse“ dass Abschnitt mit invalidHandler Rückruf:

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

---

Persönlich würde ich nicht zulassen, dass der Benutzer auf einen anderen Abschnitt, bis der Strom ein „weiter“ ist ausgefüllt und gültig. Dies macht den Einreichungsprozess viel klarer.

dies zu tun (Ihr Beispiel verwenden):

1. Remove data-toggle="collapse" Attribut von jedem "weiter" Taste und continue Klasse hinzufügen:

   <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" Tasten klicken Ereignis manuell:

   $('.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()true/false für jeden Eingang im aktuellen Bereich zurückkehren, Validierung rules Satz für das Formular verwenden:

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

DEMO