jquery-Validierung: submit-button nur dann aktiviert, wenn alle beobachteten Elemente überprüfen

Beobachten mehrere Elemente in einem Formular möchte ich aktivieren den submit-button nur, wenn alle Elemente erfolgreich zu validieren. Hier ist, was ich versucht habe:-

$('#beta_signup_form').validate({
    rules: {
        name: {
            required: true,
            minlength: 4
        },
        email: {
            required: true,
            email: true 
        }
    },
    focusCleanup: true,
    onkeyup: false,
    errorElement: "span",
    submitHandler: function(form) {
        if ($('#beta_signup_form').valid()) {
            console.log("now we enable the submit button!");
        }   
    }

});

UPDATES

Ich hatte erwartet, die submitHandler ausgelöst werden und die, wenn if ($('#beta_signup_form').valid()) Bedingung zu prüfen, dass alle unsere Felder sind gültig, bevor wir aktivieren die Schaltfläche senden, so dass der Benutzer klicken Sie auf es, um einen ajax-Aufruf, das Formular zu senden.

Aber irgendwie, nichts wird ausgelöst, wenn alle Felder gültig sind.

Habe ich herausgefunden, was ich immer falsch und das ist der submitHandler Attribut hat nichts zu tun mit der Aufdeckung der "alle Felder validiert" Ereignis. Die submitHandler Attribut nur gefeuert wird wenn ich auf meine Schaltfläche Formular, das ist nicht das, was ich brauche.

Also meine Frage ist - was ist das Ereignis brauche ich, um zu binden? Ist es ein Attribut, das verwendet werden kann für die Einstellung eines triggers, wenn alle Felder im Formular überprüfen?

Hier ist das Formular-html-code:-

    <form id="beta_signup_form" postUrl="{% url 'signups_beta_users' %}" method="post" csrf_token="{{ csrf_token }}">{% csrf_token %}
        <div>
            <input type="text" id="name" name="name" placeholder="Name" />
        </div>
        <div>
            <input type="email" id="email" name="email" placeholder="Email address" />
        </div>
        <button class="btn btn-success" type="submit" id="request-trial" href="#request-for-free-trial">Notify Me</button>
        <div class="loading"></div>
    </form>
  • Dieser link sollte Ihnen weiterhelfen: stackoverflow.com/questions/882406/...
  • Ja. Ich lese über diese, aber es funktioniert nicht für mehrere Felder. Die success event wird ausgelöst, moment 1-Feld wird überprüft, während der rest der Felder sind noch leer, das ist nicht gut genug für meine Zwecke. Ich muss trigger "aktivieren der Schaltfläche" Ereignis nur wenn ALLE Felder auf dem Formular zu überprüfen.
  • Sie müssen nicht um bedingt überprüfen $('#beta_signup_form').valid() innerhalb der submitHandler. Durch die definition, die form ist schon gültig, wenn der code innerhalb submitHandler Funktion ausgelöst wird. Siehe: jsfiddle.net/tCpXT/2
InformationsquelleAutor Calvin Cheng | 2012-12-07
  1. 1

    Meine Antwort:

    $(document).ready(function() {
    $("#beta_signup_form").validate({
        rules: {
            name: {
                required: true,
                minlength: 4
            },
            email: {
                required: true,
                email: true
            }
        },
        submitHandler: function(form) {
            alert('submitted');
        }
    });
});​

    Bin ich die Veröffentlichung meiner Antwort in Reaktion auf die zuvor akzeptierten Antworten zu zeigen, dass Sie nicht brauchen keine spezielle Funktion, um zu tun, was der OP fordert. Die .validate() plugin bereits verhält, wie dies standardmäßig.

    Dies ist das jsFiddle von der akzeptierten Antwort: http://jsfiddle.net/99mbLp1b/

    Innerhalb die Antwort, der einzige Unterschied ist dieses bit bedingten code innerhalb der submitHandler.

    submitHandler: function(form) {

    if ($("#beta_signup_form").valid()) {
        alert('now we enable the submit button!');
    }  

}

    Gemäß der Dokumentation, Die submitHandler ist die "Rückruf für die Abwicklung des tatsächlichen Einreichen , wenn das Formular gültig ist."

    Also, wenn die submitHandler wird nur aufgerufen, wenn die form gültig ist, dann ist diese ganze bedingte check ist vollkommen überflüssig...

    if ($("#beta_signup_form").valid()) { ... };

    Es ist immer true, da Sie nie selbst in die submitHandler Funktion, wenn die form nicht bereits gültig.

    Siehe demo für Beweis: http://jsfiddle.net/uehu47w1/

    Wie Sie sehen können, es funktioniert identisch wie der jsFiddle in die andere Antwort.

    InformationsquelleAutor Sparky
  2. 2

    Dieser code funktioniert perfekt für mich (siehe hier : http://jsfiddle.net/tCpXT/) : 

                <form id="beta_signup_form" postUrl="" method="post">
                <div>
                    <input type="text" id="name" name="name" placeholder="Name" />
                </div>
                <div>
                    <input type="email" id="email" name="email" placeholder="Email address" />
                </div>
                <button class="btn btn-success" type="submit" id="request-trial" href="#request-for-free-trial">Notify Me</button>
                <div class="loading"></div>
            </form>​
    <script type="text/javascript">
            $(document).ready(function() {
                $("#beta_signup_form").validate({
                rules: {
                    name: {
                        required: true,
                        minlength: 4
                    },
                    email: {
                        required: true,
                        email: true 
                    }
                },
                submitHandler: function(form) {
                    if ($("#beta_signup_form").valid()) {
                        alert('now we enable the submit button!');
                    }   
                }
                });

            });
            </script>
    InformationsquelleAutor barakadam
  3. -1

    Vielleicht haben Sie auch zum testen für 0 (siehe hier : Die jQuery-Validation " valid ()` - Methode gibt 0 zurück, wenn es erforderlich ist, nicht wahr)

    So würde es sein : 

     if (($('#beta_signup_form').valid())||($('#beta_signup_form').valid()=="")) {
        console.log("now we enable the submit button!");
    }
    • Funktioniert nicht wirklich.
    • OK, geben Sie uns das Formular code bitte. Ich werde das testen.
    • Form-code aktualisiert in meiner Frage. Danke!
    InformationsquelleAutor barakadam
Schreibe einen Kommentar