jQuery Validate na zmianie Tab

Question

Pracuję z wtyczkami jQuery Validate i Tabs. Chcę zweryfikować konkretną zakładkę, gdy użytkownik spróbuje odejść z karty na jedną z dwóch pozostałych kart. Czy ktoś ma doświadczenie z tą konkretną metodą?

Obecnie jest to jak wiążę wtyczki zakładkach:

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

można uruchomić funkcję za każdym razem karta jest zmieniana tak:

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

Można spojrzeć Pod oficjalna dokumentacja here. Wydarzenia na dole są na dole.

Możesz więc przeprowadzić walidację wewnątrz tej funkcji dla niektórych elementów sterujących na tej karcie. Również zamiast wybierania różnych kart ręcznie, możesz uzyskać indeks karty, którą wybierasz w funkcji również za pomocą ui.index. Ponadto bardzo łatwo można zapobiec zmianie użytkownika na inną kartę, jeśli bieżąca zawartość kart jest nieprawidłowa, korzystając z numeru event.preventDefault(). W sumie coś w rodzaju ...

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

Możesz grać z kodem here.