jQuery Validate on Tab change

Question

Estoy trabajando con los plugins jQuery Validate y Tabs. Deseo validar una pestaña en particular cuando el usuario intenta alejarse de la pestaña a una de las otras 2 pestañas. ¿Alguien tiene experiencia con este método en particular?

Actualmente, esta es la forma Ato el plugin aquí:

$(function() { 
     //Bind Link Tab Selection 
     //------------------ 
     var $tabs = $("#tabs").tabs(); 
     $('#step1_button').click(function() { 
      $tabs.tabs('select','2'); 
      return false; 
     }); 
     $('#step2_button').click(function() { 
      $tabs.tabs('select','3'); 
      return false; 
     }); 
     //------------------ 
     //------------------ 

     //Bind Tabs 
     //------------------ 
     $("#tabs").tabs({ 
      fx: {width:'toggle'} 
     }); 
     //------------------ 
     //------------------ 
    }); 

Answer 1

Puede ejecutar una función cada vez que la pestaña se cambia así:

$("#tabs").tabs({ 
     select: function(event, ui) { 
      // Do your validation here 
     }   
}); 

Puede echar un vistazo a la documentación oficial here. El material del evento está abajo en la parte inferior.

Así que puede hacer su validación dentro de esa función para algunos controles en esa pestaña. Además, en lugar de seleccionar diferentes pestañas manualmente, puede obtener el índice de la pestaña que está seleccionando dentro de la función también utilizando ui.index. Además, podría evitar fácilmente que el usuario cambie a otra pestaña si el contenido actual de las pestañas no es válido utilizando event.preventDefault(). Así por completo, algo así como ...

$("#tabs").tabs({ 
     select: function(event, ui) { 
      alert('validating tab ' + ui.index); 

      var valid = false; 

      // do your validating here... 
      // determine validity 

      // If the form isn't valid, prevent the tab from changing 
      if(!valid) 
      { 
       // prevent further action 
       event.preventDefault(); 
      } 
      else 
      { 
       // valid so we'll allow user to change tab 
       alert('valid'); 
      } 
     }   
}); 

Usted puede jugar alrededor con el código here.