Come convalidare correttamente il modulo Bootstrap di Twitter posizionato su diverse schede con jQuery Validate?

Question

Ho un form che si trova su diverse schede Bootstrap di Twitter:

<form id="personal-data" class="form-horizontal"> 
    <div class="tabbable"> 
    <ul id="tab" class="nav nav-tabs"> 
     <li class="active"><a href="#home" data-toggle="tab">Home</a></li> 
     <li class=""><a href="#profile" data-toggle="tab">Profile</a></li> 
     <!-- ... --> 
    </ul> 

    <div id="myTabContent" class="tab-content"> 
     <div class="tab-pane fade active in" id="home"> 
     <fieldset> 
      <div class="control-group"> 
      <div class="controls"> 
       <input type="text" id="field1"> 
      </div> 
      </div> 
     </fieldset> 
     </div> 
     <div class="tab-pane fade" id="profile"> 
     <fieldset> 
      <div class="control-group"> 
      <div class="controls"> 
       <input type="text" id="field2"> 
      </div> 
      </div> 
     </fieldset>   
     </div> 

Quando ho valid mangiato il modulo con jQuery convalidare sulla scheda attiva e campo con valore non valido si trova sulla stessa scheda, poi convalida non riesce (che è corretto). Ma quando sono in una scheda e il valore non valido è in un'altra scheda, la convalida restituisce true, che non è corretto. Come posso ripararlo? Come posso evidenziare quel campo su un'altra scheda?

Si prega di vedere this demo (basta premere il tasto prossimo - mostrerà il messaggio di errore, poi vai a ultima scheda e premere finire lì).

Answer 1

Queste schede jQuery utilizzate? È possibile disattivare tutte le altre schede e attivarle gradualmente mentre i dati inviati su ciascun modulo passano la convalida. Disabilitalo tutti tranne il primo nel costruttore e dopo ogni convalida abilita il successivo.

.tabs("enable" , index) 

Ulteriori informazioni here.

Si potrebbe anche inserire un ultimo metodo di convalida alla fine e mettere tutto il contenuto visibile a seconda delle schede in modo da poter sfuggire al ricaricamento dei collegamenti.

Answer 2

Penso che il tuo problema risieda nel fatto che la convalida si verifica solo negli elementi visibili.

Leggendo questo issue vediamo che sulla versione 1,9

Fixed #189 - :hidden elements are now ignored by default

e una soluzione di qualche commento in basso

$.validator.setDefaults({ 
    ignore: "" 
}); 

Answer 3

La mia soluzione per attivare le schede

... 
highlight: function(label) { 
     $(label).closest('.control-group').addClass('error'); 

     $(".tab-content").find("div.tab-pane:hidden:has(div.error)").each(function(){ 
      var id = $(this).attr("id"); 
      $('#tabs a[href="#'+id+'"]').tab('show'); 
     }); 
}, 
... 

è necessario che si aggiungi questo codice per consentire la modifica della scheda di js

$('a[data-toggle="tab"]').on('shown', function (e) { 
    e.target // activated tab 
    e.relatedTarget // previous tab 
}); 

Answer 4

Basandosi sulle @juanmanuele's answer, questo è come sono riuscito a farlo funzionare con Bootstrap 3 tabs:

if($(".tab-content").find("div.tab-pane.active:has(div.has-error)").length == 0) 
{ 
    $(".tab-content").find("div.tab-pane:hidden:has(div.has-error)").each(function(index, tab) 
    { 
     var id = $(tab).attr("id"); 

     $('a[href="#' + id + '"]').tab('show'); 
    }); 
} 

Per posizionare focus sul primo ingresso con l'errore:

$('a[data-toggle="tab"]').on('shown.bs.tab', function(e) 
{ 
    e.target // activated tab 

    $($(e.target).attr('href')).find("div.has-error :input:first").focus(); 

    //e.relatedTarget // previous tab 
}); 

Answer 5

Non

esattamente la soluzione per jQuery Validate, ma è possibile utilizzare l'evento "non valido" sugli elementi del modulo, per catturare gli errori di convalida HTML5 e ottenere l'elemento focalizzato, trovare il riquadro della scheda rispettivamente e mostrarlo.

Ho fatto questo.

$("form").find("input, select").on("invalid", function() { 
    var id = $(this).parents(".tab-pane").attr("id"); 

    $("#tabs-selector ul").find("li a[href='#" + id + "']").tab("show"); 
}); 

Spero che questo ti aiuti. Di nuovo, questo è per HTML5 o se jQuery Validate attiva un evento non valido.

Answer 6

grazie per il codice risolto la maggior parte del mio problema, tranne la parte per passare alla prima scheda con errore.Ho ottenuto in giro come segue:

 var IsValid = true; 

     // Validate Each Bootstrap tab 
     $(".tab-content").find("div.tab-pane").each(function (index, tab) { 
      var id = $(tab).attr("id"); 
      $('a[href="#' + id + '"]').tab('show'); 

      var IsTabValid = $("#SomeForm").valid(); 

      if (!IsTabValid) { 
       IsValid = false; 
      } 
     }); 

     // Show first tab with error 
     $(".tab-content").find("div.tab-pane").each(function (index, tab) { 
      var id = $(tab).attr("id"); 
      $('a[href="#' + id + '"]').tab('show'); 

      var IsTabValid = $("#SomeForm").valid(); 

      if (!IsTabValid) { 
       return false; // Break each loop 
      } 
     });