jQuery Validate sur l'Onglet modifier

Je suis en train de travailler avec jQuery Valider les Onglets et les plugins. Je souhaite valider un onglet en particulier lorsque l'utilisateur tente de s'éloigner de l'onglet à l'un des 2 autres onglets. Quelqu'un a une expérience avec cette méthode particulière?

Actuellement, c'est la façon dont je lier les Onglets plugin:

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

OriginalL'auteur cbm3384 | 2011-09-07

  1. 10

    Vous pouvez exécuter une fonction à chaque fois que l'onglet est modifiée comme suit:

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

    Vous pouvez jeter un oeil à la documentation officielle ici. L'événement des choses est en bas.

    De sorte que vous pouvez faire de votre validation de l'intérieur que la fonction de certains contrôles dans cet onglet. Aussi au lieu de sélectionner les différents onglets manuellement, vous pouvez obtenir l'index de l'onglet que vous êtes à la sélection à l'intérieur de la fonction en utilisant ui.index. En outre, vous pouvez très facilement empêcher l'utilisateur de changer à un autre onglet si le courant onglets de contenu n'est pas valide en utilisant event.preventDefault(). Donc, tout à fait, quelque chose comme...

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

    Vous pouvez jouer avec le code ici.

    OriginalL'auteur David Spence