jQuery Convalida a modifica scheda

Question

Sto lavorando con i plugin jQuery Validate e Tabs. Desidero convalidare una determinata scheda quando l'utente tenta di spostarsi dalla scheda a una delle altre 2 schede. Qualcuno ha esperienza con questo particolare metodo?

Attualmente, questo è come mi legano il plug-in schede:

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

È possibile eseguire una funzione ogni volta che la scheda viene modificato in questo modo:

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

Si può avere uno sguardo alla documentazione ufficiale here. La roba dell'evento è in basso.

Quindi è possibile eseguire la convalida all'interno di tale funzione per alcuni controlli in tale scheda. Inoltre, invece di selezionare manualmente diverse schede, puoi ottenere l'indice della scheda che stai selezionando all'interno della funzione anche utilizzando ui.index. Inoltre, puoi facilmente impedire all'utente di passare a un'altra scheda se il contenuto delle schede correnti non è valido utilizzando event.preventDefault(). Così tutto, qualcosa di simile ...

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

Puoi giocare in giro con il codice here.