La convalida di Jquery non funziona su pannelli di bootstrap compressi

Question

Va bene così per il mio codice HTML ho questo crollo di bootstrap e alcuni campi del modulo al suo interno.

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

Con più pannelli e ovviamente i campi modulo in cui il ... sono nell'esempio precedente.

Ho quindi il modulo che invia alla convalida jquery. Se "apro" tutti i pannelli sopra, la convalida funzionerà. Se lo faccio come dovrebbe fare e ha solo l'ultimo pannello aperto che ha solo il pulsante di invio, la convalida funziona come se non avesse problemi. Non vede i campi nei pannelli compressi?

Non sono stato in grado di trovare alcuna risposta al riguardo e sperare che la comunità possa aiutarmi.

Come eseguire la convalida jquery quando i pannelli di bootstrap sono compressi?

Come da richiesta Ho creato un JS Fiddle

Non appena si carica il violino e tenta di inviare il modulo (scorrere verso il basso anteprima) si vedrà che si ottiene fastidiosi avvisi e ti dice il modulo viene mancano i campi obbligatori.Questo dovrebbe succedere!

Ora, se si seleziona line 90 nel codice HTML e rimuovere la parola in sul nome della classe del seguente div:

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

e ri-caricare il violino e poi passare attraverso i pannelli e prova a inviare nuovamente, noterai che non ricevi avvisi o notifiche fastidiosi. Tranne che ricevi una notifica che dice che il modulo è stato inviato.

Questo è il problema come non è la cattura che non hai messo il tuo nome o l'indirizzo di posta elettronica nel

Answer 1

quanto riguarda la questione -. Nascosto (e questo è ciò che accade quando l'elemento è compresso) i campi di input sono ignorato nel processo di convalida. Per evitare questo, è possibile impostare l'opzione ignore:

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

Demo with "ignore: false"

Nota: con l'esempio precedente, non sarete in grado di indirizzare l'utente di nuovo ai campi di input non validi in quanto' effettivamente nascosto nella sezione collapsed. È possibile però "uncollapse" quella sezione, utilizzando 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

---

Personalmente, non permetterebbe all'utente di "continuare" a un'altra sezione fino a quando quella attuale è compilato e valido. Ciò rende molto più chiaro il processo di invio.

a farlo (usando il vostro esempio):

1. Rimuovere data-toggle="collapse" attributo da ogni "continua" pulsante e aggiungere continue classe:

   <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. Impostare "continua" i pulsanti fanno clic sull'evento manualmente:

   $('.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() tornerà true/false per ogni ingresso nella sezione corrente, utilizzando la convalida rules set per la forma:

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

DEMO