Öffnen Akkordeon-panel auf Fehler bei der überprüfung

Ich bin mit jQuery-accordion-split meine Formulare in mehreren panels und jQquery überprüfung überprüfen Sie die erforderlichen Felder aus. Es funktioniert großartig und zeigt Fehler in validierten Felder so lange, wie Sie in den öffnen-Dialog.

Beispiel. Sagen wir, ich habe Baum Akkordeon-panels und auf den ersten habe ich zwei Formularfelder validiert werden. Nun, wenn der Besucher switch panel von zwei oder drei und bezwingend das Formular ohne ausfüllen der erforderlichen Felder auf dem Bedienfeld, möchte ich die erste Akkordeon-panel zu öffnen, und zeigen Sie den Fehler.

Weiß jemand einen Weg, diese Arbeit zu machen?

Dies ist der code, den ich verwende heute:

$(document).ready(function() {
$("#accordion").accordion({
    autoHeight: false,
    navigation: true,
});

$("#validate_form").validate({
    rules: {
        page_title: "required",
        seo_url: "required",
        AccordionField: {
            required: true
        }
    },
    ignore: [],
    messages: {
        page_title: "Please enter a page title",
        seo_url: "Please enter a valid name"
    }
 }); 
});
InformationsquelleAutor perqedelius | 2012-07-14
  1. 3

    Lösen das konkrete problem in deiner Frage ist, das Sie nur noch ein invalidHandler callback-Funktion aufruft, die aktivieren() - Methode der accordion-widget zu öffnen, der erste Bereich:

    $("#validate_form").validate({
    //your options,
    invalidHandler: function(form, validator) {
        if (validator.numberOfInvalids() > 0) {
            $("#accordion").accordion("activate", 0);
        }
    }
});

    Sagte, Umgang mit dem Allgemeinen Fall (ungültige Elemente auf einen beliebigen Bereich) und wechseln in den entsprechenden Bereich wäre wohl besser sein. Um das zu tun, wir haben zu Holen die ersten ungültiges element aus der invalidHandler Rückruf. Wir können mit der errorClass verwendet der validation engine (error standardmäßig), aber wir können nicht blind entsprechen, weil diese Klasse wird auch angewendet, um die Fehlermeldung labels. Die Einschränkung der Ergebnisse mit einer :input Selektor wird uns hier helfen.

    Von dort aus können wir am nächsten() entsprechend der Vorfahren Akkordeon-Bereich, und index() Erhalt der index in relation zu den anderen Bereichen, das führt uns zu dem folgenden code:

    $("#validate_form").validate({
    //your options,
    invalidHandler: function(form, validator) {
        if (validator.numberOfInvalids() > 0) {
            validator.showErrors();
            var index = $(":input.error").closest(".ui-accordion-content")
                                         .index(".ui-accordion-content");
            $("#accordion").accordion("activate", index);
        }
    }
});

    Update: Wir auch zu nennen showErrors() explizit in unserer invalidHandler, da diese Funktion ist verantwortlich für die Dekoration der ungültigen Elementen mit der error Klasse in den ersten Platz, aber in der Regel nur genannt danach. (Quelle: http://forum.jquery.com/topic/jquery-validate-invalidhandler-is-called-before-the-errors-are-shown-maybe-better-vice-versa.)

    • Es fast geklappt. Wenn ich senden Sie das Formular mit Pflichtfelder leer gelassen, es schaltet nicht auf den entsprechenden Bereich. Aber wenn ich Ihnen ein zweites mal, dann wechseln Sie auf das erste Feld mit Fehler. Es scheint, wie die erste Zeit nur generiert den Fehler.
    • yup, der Aufruf showErrors() soll dieses Problem beheben. Hast du mein update?
    • Süß, jetzt funktioniert ' s wie sharm! Vielen Dank!
    InformationsquelleAutor Frédéric Hamidi
  2. 3

    Die API hat sich etwas verändert, hier ist ein Beispiel, basierend auf der ausgewählten Antwort für jedermann in der Zukunft. Hinweis: die ignore die benötigt wird, um zu verhindern, dass die versteckten Felder in einem Akkordeon wird übersehen durch den validator.

    $('form').validate({
    invalidHandler: function(event, validator) {
        if (validator.numberOfInvalids() > 0) {
            validator.showErrors();
            //Open accordion tab with errors
            var index = $(".has-error")
                .closest(".ui-accordion-content")
                .index(".ui-accordion-content");
            $(".accordion").accordion("option", "active", index);
        }
    },
    ignore: [],
});
    • Beachten Sie auch die änderung von $("#accordion").accordion("activate", index); zu $(".accordion").accordion("option", "active", index); mit index gleich 0 für das erste Element im Akkordeon.
    InformationsquelleAutor Tomanow
  3. 0

    Für diejenigen, die Verwendung von MVC, die invalidHandler für Sie erstellt.
    Als ich versuchte überschreiben (von https://github.com/jzaefferer/jquery-validation/issues/765)

    $form.off('invalid-form.validate')
                .on('invalid-form.validate', newInvalidHandler);

    Form immer Unterwerfen werde.

    Meine Lösung ist, ziehen Sie die Funktion und rufen Sie es, wenn der submit geklickt wird.
    Ich hatte auch ziehen Sie das ignorieren=[]

    function ShowPanel() {
    var validator = $("form").validate();
    if (validator.numberOfInvalids() > 0) {
        validator.showErrors();
        var index = $(".input-validation-error")
                    .closest(".ui-accordion-content")
                    .index(".ui-accordion-content");
        $("#accordion").accordion("option", "active", index);
    } 
}

$("#Save").click(function () { if (!$("form").valid()) { ShowPanel(); } });

$("form").data("validator").settings.ignore = [];
    InformationsquelleAutor Jeiron
Schreibe einen Kommentar