Daraltılmış önyükleme panelleri üzerinde çalışmayan JQuery doğrulaması

Question

Pekala, HTML'm için bu önyükleme çökmesi ve bunun içinde bazı form alanları var. Açıkçası çok panel ve ... yukarıdaki örnekte olduğu form alanları ile

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

.

Daha sonra jquery doğrulamasına gönderim formunu aldım. Yukarıdaki tüm panelleri "açarsam", doğrulama çalışır. Bunu yapması gerektiği gibi yaparsam ve sadece son olarak yalnızca gönder düğmesini içeren panel açılırsa, doğrulama herhangi bir sorun yaşamadan çalışır. Daraltılmış panellerdeki alanları görmüyor mu?

Bu konuda herhangi bir yanıt bulamadım ve topluluğun bana yardımcı olmasını umuyordum.

Bootstrap panelleri daraltıldığında jQuery doğrulamasını nasıl çalıştırırım?

talep başına ben en kısa sürede keman yüklemek ve formu göndermek için çalışırken bir JS Fiddle

yarattık gibi (önizleme aşağı kaydırın) Eğer can sıkıcı uyarılar alabilir göreceksiniz ve size formu olduğunu söyler gerekli alanlar eksik.Bunun olması gerekiyordu! Şimdi

, HTML'de line 90 ilerleyin ve aşağıdaki div class adını sözcüğü in kaldırırsanız:

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

ve paneller geçmesi ardından keman yeniden yüklemek ve ve tekrar göndermeyi deneyin, herhangi bir can sıkıcı uyarı veya bildirim almadığınızı göreceksiniz. Bunun dışında, formun gönderildiğini belirten bir bildirim alırsınız.

Bu

Eğer adınızı veya e-posta adresini koymadığını yakalamak değil gibi sorundur

Answer 1

sorusuna gelince

-. Gizlenmiş (ve bu element daraltıldığında ne olur edilir) giriş alanlardır doğrulama sürecinde göz ardı edilir.

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

Demo with "ignore: false"

Not: Bunu önlemek için, ignore seçeneğini ayarlayabilirsiniz yukarıdaki örnekle, onlar' geçersiz giriş alanları geri yönlendirmek mümkün olmayacaktır olacak Aslında collapsed bölümünde gizlenmiş. Şunları yapabilirsiniz ancak "daraltma geri" o bölüm, invalidHandler geri arama kullanarak:

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

Şahsen

---

, ben kullanıcı mevcut olandan kadar başka bir bölüme "devam" izin vermeyeceğini doldurulur ve geçerlidir. Bu, gönderi sürecini çok daha net hale getirir.

(sizin örneğini kullanarak) Bunu yapmak için:

1. Kaldır data-toggle="collapse" her öznitelik renkli "Devam" ve continue sınıfını ekleyin:

   <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 "devam" düğmeler olayı elle tıklatır:

   $('.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() formu için doğrulama rules seti kullanılarak, geçerli bölümdeki her bir giriş için true/false döndürür:

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

DEMO