Jquery validación de múltiples pestañas, validar una a la vez?

Question

Soy nuevo en jQuery y estoy tratando de usarlo y el complemento de validación (http://docs.jquery.com/Plugins/Validation) para crear un formulario de varias partes con varias pestañas para diferentes secciones. Ahora mismo lo tengo donde hay varias pestañas y el botón "Siguiente" cambia a la siguiente pestaña.

El problema que estoy teniendo es que cuando finalmente se presento en la última página, la forma valida correctamente, pero si hay errores en la otra página, el usuario no es notificado, y la validación en realidad sólo ocurre una vez en "enviar" se hace clic.

¿Cómo puedo validar cada uno individualmente cuando hago clic en "Siguiente"? Realmente no quiero crear formularios múltiples ni realizar un seguimiento de los campos ocultos: S ¿Alguna sugerencia?

Gracias!

<script type="text/javascript"> 
$(document).ready(function() { 
    //....stuff 
    //tabs 
    var tabs = $("#tabs").tabs(); 
    $(".nexttab").click(function() { 
     //var selected = $("#tabs").tabs("option", "selected"); 
     //$("#tabs").tabs("option", "selected", selected + 1); 
     $("#tabs").tabs("select", this.hash); 
    }); 

    //use link to submit form instead of button 
    $("a[id=submit]").click(function(){ 
     $(this).parents("form").submit(); 
    }); 

    //form validation 
    var validator = $("#myForm").validate();  
}); 
</script> 

<form class="cmxform" id="myForm" method="post" action=""> 
    <div id="tabs"> 
     <ul> 
      <li><a href="#general">General</a></li> 
      <li><a href="#tab2"></a></li> 
     </ul> 

     <div id="general"> 
      ....stuff... 
      <p> 
       <a class="nexttab navbutton" href="#tab2"><span>Next</span></a> 
      </p> 
     </div> 
     <div id="tab2"> 
      <h2>Tab2</h2> 
      <p> 
       <a class="nexttab navbutton" href="#general"><span>Prev</span></a> 
       <a class="submit navbutton" id="submit" href="#"><span>Submit</span></a> 
      </p> 
     </div> 
    </div> 
</form> 

Editar:

@ Andrew:

Hice una cierta combinación de su segundo ejemplo y pestañas incapacitantes. Parece que funciona, además de tener la actualización de la página volver a desactivar las pestañas.

var tabs = $("#tabs").tabs({ 

    disabled: [1,2,3,4,5], 

    select: function(event, ui) { 
     var valid = true; 
     var current = $(this).tabs("option", "selected"); 
     var panelId = $("#tabs ul a").eq(current).attr("href"); 

     if(ui.index > current) 
     { 
      $(panelId).find("input").each(function() { 
       //console.log(valid); 

       if (!validator.element(this) && valid) { 
        valid = false; 
       } 
      }); 

     } 

     return valid; 
    } 

}); 

en combinación con:

$(".nexttab").click(function() { 
    var selected = $("#tabs").tabs("option", "selected"); 
    $("#tabs").tabs("enable", selected+1); 
    $("#tabs").tabs("option", "selected", selected + 1); 
}); 

Answer 1

Esto es posible utilizando la función .element(selector) de validator. Lo que vas a hacer es iterar a través de cada elemento en la pestaña activa y llamar a esa función en la entrada. Esto disparará la validación en cada elemento, mostrando el mensaje de validación.

$(".nexttab").click(function() { 
    var valid = true; 
    var i = 0; 
    var $inputs = $(this).closest("div").find("input"); 

    $inputs.each(function() { 
     if (!validator.element(this) && valid) { 
      valid = false; 
     } 
    }); 

    if (valid) { 
     $("#tabs").tabs("select", this.hash); 
    } 
}); 

Además, es probable que desee ejecutar código similar cuando un usuario hace clic en una ficha para ir a un nuevo conjunto de entradas, en lugar de hacer clic en "siguiente".

Aquí está un ejemplo de trabajo: http://jsfiddle.net/c2y6r/

Actualización: Aquí hay otra manera que podría hacerlo, cancelar el evento select sobre los elementos de formulario no válidos:

var validator = $("#myForm").validate(); 
var tabs = $("#tabs").tabs({ 
    select: function(event, ui) { 
     var valid = true; 
     var current = $(this).tabs("option", "selected"); 
     var panelId = $("#tabs ul a").eq(current).attr("href"); 

     $(panelId).find("input").each(function() { 
      console.log(valid); 
      if (!validator.element(this) && valid) { 
       valid = false; 
      } 
     }); 

     return valid; 
    } 
}); 

Sin embargo, ahora usted tiene que considerar lo que permite el usuario debe regresar cuando ingresaron datos no válidos en la página actual. Por otro lado, obtienes la ventaja de mantener todo el código de validación dentro de una función que se activa si la persona hace clic en una pestaña o en tu próximo enlace.

Ejemplo: http://jsfiddle.net/c2y6r/1/

Actualización 2, si desea permitir a la gente a navegar hacia atrás a través de la interfaz de pestaña:

var tabs = $("#tabs").tabs({ 
    select: function(event, ui) { 
     var valid = true; 
     var current = $(this).tabs("option", "selected"); 
     var panelId = $("#tabs ul a").eq(current).attr("href"); 

     if (ui.index > current) { 

      $(panelId).find("input").each(function() { 
       console.log(valid); 
       if (!validator.element(this) && valid) { 
        valid = false; 
       } 
      }); 
     } 

     return valid; 
    } 
}); 

Answer 2

El código existente no funcionó para mí (tal vez está anticuado) así que se me ocurrió lo siguiente. Este ejemplo se asume usando jquery tabs y jquery validator.

$('#tabs').tabs(
{ 
    beforeActivate: function(event, ui) 
    { 
     var valid = $("#myForm").valid(); 
     if (!valid) { 
      validator.focusInvalid(); 
      return false; 
     } 
     else 
      return true; 
    } 
});