it-swarm.com.de

JQuery-Validierung mehrere Registerkarten, jeweils eine validieren?

Ich bin neu in jQuery und ich versuche, es und das Validierungs-Plugin (http://docs.jquery.com/Plugins/Validation) zu verwenden, um ein mehrteiliges Formular mit mehreren Registerkarten für verschiedene Abschnitte zu erstellen. Im Moment habe ich es, wo es mehrere Registerkarten gibt und die Schaltfläche "Weiter" auf die nächste Registerkarte wechselt.

Das Problem, das ich habe, besteht darin, dass das Formular beim endgültigen Senden auf der letzten Seite ordnungsgemäß überprüft wird. Wenn jedoch auf der anderen Seite Fehler auftreten, wird der Benutzer nicht benachrichtigt, und die Überprüfung findet tatsächlich nur statt, wenn auf "Senden" geklickt wird.

Wie würde ich jedes einzeln validieren, wenn ich auf "Weiter" klicke? Ich möchte nicht wirklich mehrere Formulare erstellen oder ausgeblendete Felder im Auge behalten: S Irgendwelche Vorschläge?

Vielen Dank!

<script type="text/javascript">
$(document).ready(function() {
    //....stuff
    //tabs
    var tabs = $("#tabs").tabs();
    $(".nexttab").click(function() {
        //var selected = $("#tabs").tabs("option", "selected");
        //$("#tabs").tabs("option", "selected", selected + 1);
        $("#tabs").tabs("select", this.hash);
    });

    //use link to submit form instead of button
    $("a[id=submit]").click( function(){
        $(this).parents("form").submit();
    });

    //form validation
    var validator = $("#myForm").validate();    
});
</script>

<form class="cmxform" id="myForm" method="post" action="">
    <div id="tabs">
        <ul>
            <li><a href="#general">General</a></li>
            <li><a href="#tab2"></a></li>
        </ul>

        <div id="general">
             ....stuff...
            <p>
                <a class="nexttab navbutton" href="#tab2"><span>Next</span></a>  
            </p>
        </div>
        <div id="tab2">
            <h2>Tab2</h2>
            <p>
                <a class="nexttab navbutton" href="#general"><span>Prev</span></a>
                <a class="submit navbutton" id="submit" href="#"><span>Submit</span></a>
            </p>
        </div>
    </div>
</form>

Bearbeiten:

@ Andrew:

Ich habe eine Kombination aus Ihrem zweiten Beispiel und dem Deaktivieren von Registerkarten erstellt. Scheint zu funktionieren, abgesehen davon, dass die Seitenaktualisierung die Registerkarten wieder deaktiviert.

var tabs = $("#tabs").tabs({

    disabled: [1,2,3,4,5],

    select: function(event, ui) {
        var valid = true;
        var current = $(this).tabs("option", "selected");
        var panelId = $("#tabs ul a").eq(current).attr("href");

        if(ui.index > current)
        {
            $(panelId).find("input").each(function() {
                //console.log(valid);

                if (!validator.element(this) && valid) {
                    valid = false;
                }
            });

        }

        return valid;
    }   

});

In Kombination mit:

$(".nexttab").click(function() {
    var selected = $("#tabs").tabs("option", "selected");
    $("#tabs").tabs("enable", selected+1);
    $("#tabs").tabs("option", "selected", selected + 1);
});
12
Jordan

Dies ist mit der Funktion .element(selector) von validator möglich. Sie durchlaufen jedes Element auf der aktiven Registerkarte und rufen diese Funktion für die Eingabe auf. Dies löst nacheinander eine Überprüfung für jedes Element aus und zeigt die Überprüfungsmeldung an.

$(".nexttab").click(function() {
    var valid = true;
    var i = 0;
    var $inputs = $(this).closest("div").find("input");

    $inputs.each(function() {
        if (!validator.element(this) && valid) {
            valid = false;
        }
    });

    if (valid) {
        $("#tabs").tabs("select", this.hash);
    }
});

Außerdem möchten Sie wahrscheinlich ähnlichen Code ausführen, wenn ein Benutzer auf eine Registerkarte klickt, um zu einer neuen Gruppe von Eingaben zu wechseln, anstatt auf "Weiter" zu klicken.

Hier ist ein funktionierendes Beispiel: http://jsfiddle.net/c2y6r/

Update: Hier ist eine andere Möglichkeit, das Ereignis select bei ungültigen Formularelementen abzubrechen:

var validator = $("#myForm").validate();
var tabs = $("#tabs").tabs({
    select: function(event, ui) {
        var valid = true;
        var current = $(this).tabs("option", "selected");
        var panelId = $("#tabs ul a").eq(current).attr("href");

        $(panelId).find("input").each(function() {
            console.log(valid);
            if (!validator.element(this) && valid) {
                valid = false;
            }
        });

        return valid;
    }
});

Jetzt müssen Sie jedoch in Betracht ziehen, dem Benutzer das Zurückgehen zu ermöglichen, wenn er ungültige Daten auf der aktuellen Seite eingegeben hat. Andererseits erhalten Sie den Bonus, den gesamten Validierungscode in einer Funktion zu behalten, die ausgelöst wird, wenn die Person auf einen Tab oder Ihren nächsten Link klickt.

Beispiel: http://jsfiddle.net/c2y6r/1/

Update 2 , wenn Sie zulassen möchten, dass Benutzer rückwärts über die Registerkartenoberfläche navigieren:

var tabs = $("#tabs").tabs({
    select: function(event, ui) {
        var valid = true;
        var current = $(this).tabs("option", "selected");
        var panelId = $("#tabs ul a").eq(current).attr("href");

        if (ui.index > current) {

            $(panelId).find("input").each(function() {
                console.log(valid);
                if (!validator.element(this) && valid) {
                    valid = false;
                }
            });
        }

        return valid;
    }
});
11
Andrew Whitaker

Der vorhandene Code hat bei mir nicht funktioniert (vielleicht ist er veraltet), daher habe ich Folgendes gefunden. In diesem Beispiel wird davon ausgegangen, dass jquery-Registerkarten und jquery validator verwendet werden.

$('#tabs').tabs(
{
    beforeActivate: function( event, ui )
    {   
        var valid = $("#myForm").valid();
        if (!valid) {
            validator.focusInvalid();
            return false;
        }
        else
            return true;
    }
});
0
vdidxho