jQuery Validate auf Registerkarte ändern

Arbeite ich mit jQuery Validierung und Tabs plugins. Ich möchte überprüfen einer bestimmten Registerkarte, wenn die Benutzer versucht, die Abkehr von der Registerkarte auf eine der anderen 2 tabs. Hat jemand Erfahrung mit dieser speziellen Methode?

Derzeit ist dies, wie ich binden Sie das Tabs-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'}
       });
       //------------------
       //------------------
    });
InformationsquelleAutor cbm3384 | 2011-09-07
  1. 10

    Können Sie eine Funktion auszuführen, jedes mal, wenn die Registerkarte wird geändert wie folgt:

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

    Können Sie einen Blick auf die offizielle Dokumentation hier. Die event-Sachen ist unten an der Unterseite.

    So können Sie Ihre Validierung im inneren, dass die Funktion für einige Steuerelemente in dieser Registerkarte. Auch statt der Auswahl der verschiedenen tabs manuell, können Sie den index der Registerkarte können Sie die Auswahl innerhalb der Funktion auch über ui.index. Darüber hinaus könnte man sehr leicht verhindern, dass der Nutzer den Wechsel zu einer anderen Registerkarte, wenn die aktuelle Registerkarten Inhalt nicht gültig ist, indem Sie mit event.preventDefault(). Also insgesamt so etwas wie...

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

    Können Sie spielen über den code hier.

    InformationsquelleAutor David Spence
Schreibe einen Kommentar