jQuery Validierung und tabs

Ich weiß, es ist schon ein paar Monate, aber ich hatte einfach zu handhaben dieses Problem mich und ich glaube, dass ich habe kommen mit einer guten Lösung.

Eher als Deko-tab mit einem Fehler in der invalidHandler, verwenden Sie stattdessen die highlight und unhighlight - Handler entsprechend zu markieren, oder unhighlight ist die Registerkarte mit den ungültigen Eintrag. Im Gegensatz zu invalidHandler was nicht aufgerufen wird, bis eine Vorlage versucht wird (oder ein manueller Aufruf, um ihn zu bestätigen), highlight und unhighlight werden aufgerufen, wenn ein ungültiges Feld verarbeitet wird - einschließlich onBlur.

jQuery('#Form').validate({
    highlight: function(element, errorClass, validClass) {
        $(element).addClass(errorClass).removeClass(validClass);
        $('a[href=#' + $(element).parents('.ui-tabs-panel').attr('id') + ']').addClass(errorClass).removeClass(validClass);
    },
    unhighlight: function(element, errorClass, validClass) {
        $(element).removeClass(errorClass).addClass(validClass);
        $('a[href=#' + $(element).parents('.ui-tabs-panel').attr('id') + ']').removeClass(errorClass).addClass(validClass);
    }
});

In den obigen code für highlight und unhighlight ich hinzufügen-und entfernen Sie die entsprechende Fehlermeldung und gültige Klassen aus dem ungültiges element (Standard-Verhalten) und dann benutze ich einen (Doppel -) Selektor, um jede <a />, die Last, die ein element mit div-und ich füge hinzu, oder entfernen Sie die gleichen Klassen auf die Registerkarte link. Dieser code setzt Voraus, dass die Registerkarte Inhalt ist nicht geladen werden mit AJAX und die links, die Last der div haben ein href um div-Anker-ID. Wenn Ihr Registerkarte link-Konfiguration unterscheidet, die Sie haben wahrscheinlich zu zwicken Selektor ein wenig nach Ihren Bedürfnissen.

Update

Nach der Prüfung, und einige mehr, die ich identifiziert haben, ein Fallstrick, der zu einem Rückgang der Legitimität der Lösung. Nämlich, dies entfernt die error-Klasse aus der Registerkarte link, unabhängig davon, ob oder nicht es gibt immer noch ungültige Elemente in den tab. Die ungültige Elemente bleiben markiert, aber der Reiter verliert seine Hervorhebung. Ich habe experimentiert mit gangbare workarounds zu diesem Thema und bisher habe ich keinen gefunden. Ich werde diese zu aktualisieren, ob/Wann ich tun.

Ich Kämpfe mit dem gleichen problem, aber haben bis zu... IMHO die real-blocker ist, dass die jQuery-Validierung hat keine onBeforeValidate Rückruf. Dies würde ermöglichen es Ihnen, entfernen Sie alle Fehler die Symbole, bevor die überprüfung beginnt und lassen Sie dann die validate() re-ordnen Sie Sie, wenn nötig.

Ich kam mit einer Lösung, die ich denke, ist sehr sauber und benutzerfreundlich, einfach Fokus die Registerkarte mit dem nächsten Fehler, dies funktioniert so lange, wie Sie Ihre Eingänge bekommen, die Klasse input-validation-Fehler wenn ein Fehler vorliegt, aber Sie können den code ändern, um irgendetwas suchen, hier ist die Funktion:

function FocusTabWithErrors(tabPanelName) {
    var tabpanel = $(tabPanelName);
    var tabs = tabpanel.children('div').toArray();
    var tabNames = Array();
    for (var i = 0; i < tabs.length; i++) {
        tabNames[i] = "#" + tabs[i].id;
    }
    tabpanel.find(":input").each(function () {
        if ($(this).hasClass('input-validation-error')) { 
            for (var z = 0; z < tabNames.length; z++) {
                if ($(tabNames[z]).find($(this)).length)
                    tabpanel.tabs("select", z);
            }
            return false; //ends each
        }
        return true;
    });
}

Dann müssen Sie nur binden, um die form der submit-Ereignis:

    $('#myForm').submit(function () {
        FocusTabWithErrors('#tabPanel');
    });

Lassen Sie mich wissen Sie Ihre Gedanken.