¿Cómo validar correctamente el formulario Bootstrap de Twitter colocado en varias pestañas con jQuery Validate?

Question

He una forma situada en varias pestañas Bootstrap de 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> 

Cuando valid comí el formulario con jQuery validar en la pestaña activa y campo con valor no válido está en la misma pestaña, entonces falla la validación (que es correcta) Pero cuando estoy en una pestaña y el valor no válido está en otra pestaña, la validación devuelve true, que es incorrecta. ¿Cómo puedo arreglarlo? ¿Cómo puedo resaltar ese campo en otra pestaña?

favor ver this demo (simplemente pulse el botón siguiente - se mostrará un mensaje de error, y luego ir a la última pestaña y pulse terminar allí).

Answer 1

¿Están estas pestañas jQuery que está utilizando? Puede desactivar todas las demás pestañas y activarlas gradualmente mientras los datos enviados en cada formulario superan la validación. Deshabilítelos todos excepto el primero en su constructor y después de cada validación habilite el siguiente.

.tabs("enable" , index) 

Más información here.

También podría poner un método de validación final al final y poner todo su contenido visible dependiendo de las pestañas para que pueda evitar la recarga de los enlaces.

Answer 2

Creo que su problema radica en el hecho de que la validación se produce solo en elementos visibles.

La lectura de este issue vemos que en la versión 1,9

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

y una solución de algunos comentarios abajo

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

Answer 3

Mi solución para habilitar pestañas

... 
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'); 
     }); 
}, 
... 

es necesario que se agregue este código para permitir cambiar la pestaña por js

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

Answer 4

Sobre la base de @juanmanuele's answer, así es como me las arreglé para conseguir que funcione 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'); 
    }); 
} 

poner el foco en la primera entrada con el error:

$('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

No

exactamente la solución para jQuery Validate, pero podría usar el evento "no válido" en los elementos de formulario, para detectar errores de validación HTML5 y obtener el elemento centrado, buscar el panel de pestañas respectivo y mostrarlo.

He hecho esto.

$("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"); 
}); 

Espero que te ayude. De nuevo, esto es para HTML5 o si jQuery Validate activa un evento no válido.

Answer 6

gracias por su código que resolvió la mayor parte de mi problema, excepto la parte para navegar a la primera pestaña con error.Tengo alrededor de la siguiente manera:

 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 
      } 
     });