jquery.validate.unobtrusive arbeitet nicht mit dynamischen Elementen injizierten

Question

Ich arbeite mit ASP.Net MVC3, desto einfacher Weg, um die Client-Validierung zu verwenden, wäre die jquery.validate.unobtrusive ermöglicht. Alles funktioniert gut, für Sachen, die direkt vom Server sind.

Aber wenn ich versuche, ein paar neue ‚Eingänge‘ mit Javascript zu injizieren, und ich wusste, dass ich auf Anruf $.validator.unobtrusive.parse() muß die Validierungen erneut zu binden. Aber nach wie vor, all jene dynamische injizierten Felder funktionieren nicht.

Noch schlimmer ist, versuche ich manuell zu binden jquery.validate verwenden und es ist auch nicht arbeiten. Irgendwelche Gedanken?

Answer 1

Ich habe eine Erweiterung für die jquery.validate.unobtrusive Bibliothek erstellt, die dieses Problem für meine Situation gelöst -. Es von Interesse sein könnte

http://xhalent.wordpress.com/2011/ 24.01 / Anwendung-unaufdringlich-Validierung-to-dynamisch-content /

Answer 2

Ich habe versucht, Xhalent Ansatz aber leider war es nicht für mich arbeiten. Robins Ansatz funktioniert und funktionierte nicht. Es war gut geeignet für dynamisch hinzugefügte Elemente, aber wenn man versucht, JQuery zu verwenden, um alle die Validierungs Attribute und Spannweiten aus dem DOM zu entfernen, noch die Validierung Bibliothek würde versuchen, sie zu überprüfen.

Wenn Sie jedoch die Form der „unobtrusiveValidation“ Daten zusätzlich zu „validationData“ entfernen, es funktionierte wie ein Zauber zum dynamischen Hinzufügen und Entfernen von Elementen, die Sie validiert werden sollen oder nicht validiert werden.

$("form").removeData("validator");
$("form").removeData("unobtrusiveValidation");
$.validator.unobtrusive.parse("form");

Answer 3

ich wirklich wirklich wie die Einfachheit der @viggity und @Robins Lösung, so dass ich es in eine schnelle kleine Plugin gedreht:

(function ($) {

    $.fn.updateValidation = function () {
        var $this = $(this);
        var form = $this.closest("form")
            .removeData("validator")
            .removeData("unobtrusiveValidation");

        $.validator.unobtrusive.parse(form);

        return $this;
    };
})(jQuery);

Beispiel Nutzung:

$("#DischargeOutcomeNumberOfVisits")
    .attr("data-val-range-min", this.checked ? "1" : "2")
    .updateValidation();

Answer 4

Ich habe das gleiche Problem. Ich entdeckte es nicht möglich ist, zweimal $ .validator.unobtrusive.parse () auf der gleichen Form zu nennen. Wenn das Formular geladen wird zunächst von dem Server des Formular automatisch durch die unauffällige Bibliothek analysiert. Wenn Sie ein Eingabeelement zum Formular hinzufügen dynamisch und rufen Sie wieder $ .validator.unobtrusive.parse (), wird es nicht funktionieren. Das gleiche gilt für parseElement ().

Der unauffällige lib ruft die Validate-Methode des jquery Validate-Plugin alle Regeln und Nachrichten einzustellen. Das Problem ist, wenn erneut aufgerufen, das Plugin nicht den neuen Satz von Regeln nicht aktualisiert sein gegeben.

Ich fand eine rohe Lösung: Vor der Parse-Methode auf dem unaufdringlichen lib Aufruf, i die Form Validator wegzuzuwerfen:

$('yourForm').removeData("validator");

Wenn nun der Validate-Methode durch die unaufdringliche lib genannt wird, werden alle Regeln und Nachrichten neu erstellt werden, einschließlich der dynamisch hinzugefügt Eingänge.

Hope, das hilft

Answer 5

Ich bin mit MVC 4 und JQuery 1.8, sieht aus wie das folgende Stück Code benötigt wird, um JQuery Validierung dynamisch injizierten Inhalte über Ajax oder JQuery in das DOM zu ermöglichen.

Ich habe eine modulare Funktion gemacht, die das jQuery-Objekt des neu hinzugefügten Elements akzeptiert. Wenn Sie eine neue Tabelle mit der ID tblContacts mit JQuery auf einen Klick geklont haben, dann schließt die Funktion unten in Ihrer js Datei

function fnValidateDynamicContent(element) {
    var currForm = element.closest("form");
    currForm.removeData("validator");
    currForm.removeData("unobtrusiveValidation");
    $.validator.unobtrusive.parse(currForm);
    currForm.validate(); // This line is important and added for client side validation to trigger, without this it didn't fire client side errors.
}

und es so nennen:

fnValidateDynamicContent("#tblContacts")

Answer 6

Unter von Xhalent-Lösung als Antwort oben markiert, ich auf sie erweitert ein wenig.

$.validator.unobtrusive.parseDynamicContent = function (selector) {
    var $selector = $(selector),
        $jqValUnob = $.validator.unobtrusive,
        selectorsDataValAttr = $selector.attr('data-val'),
        $validationInputs = $selector.find(':input[data-val=true]');

    if ((selectorsDataValAttr !== 'true') && 
        ($validationInputs.length === 0)) { 
        return; 
    }

    if (selectorsDataValAttr === 'true') {
        $jqValUnob.parseElement(selector, true);
    }

    $validationInputs.each(function () {
        $jqValUnob.parseElement(this, true);
    });

    //get the relevant form
    var $form = $selector.first().closest('form');

    $jqValUnob.syncValdators($form);
};

/* synchronizes the unobtrusive validation with jquery validator */
$.validator.unobtrusive.syncValdators = function ($form) {
    if ($.hasData($form[0])) {
        var unobtrusiveValidation = $form.data('unobtrusiveValidation'),
            validator = $form.validate();

        // add validation rules from unobtrusive to jquery
        $.each(unobtrusiveValidation.options.rules, function (elname, elrules) {
            if (validator.settings.rules[elname] == undefined) {
                var args = {};
                $.extend(args, elrules);
                args.messages = unobtrusiveValidation.options.messages[elname];
                $("[name='" + elname + "']").rules("add", args);
            } else {
                $.each(elrules, function (rulename, data) {
                    if (validator.settings.rules[elname][rulename] == undefined) {
                        var args = {};
                        args[rulename] = data;
                        args.messages = unobtrusiveValidation.options.messages[elname][rulename];
                        $("[name='" + elname + "']").rules("add", args);
                    }
                });
            }
        });
        // remove all validation rules from jquery that arn't in unobtrusive
        $.each(validator.settings.rules, function (elname, elrules) {
            if (unobtrusiveValidation.options.rules[elname] === undefined) {
                delete validator.settings.rules[elname];
            } else {
                $.each(elrules, function (rulename, data) {
                    if (rulename !== "messages" && unobtrusiveValidation.options.rules[elname][rulename] === undefined) {
                        delete validator.settings.rules[elname][rulename];
                    }
                });
            }
        });
    }        
};

$.validator.unobtrusive.unparseContent = function (selector) {
    var $selector = $(selector);

    // if its  a text node, then exit
    if ($selector && $selector.length > 0 && $selector[0].nodeType === 3) {
        return;
    }

    var $form = $selector.first().closest('form'), 
        unobtrusiveValidation = $form.data('unobtrusiveValidation');

    $selector.find(":input[data-val=true]").each(function () {
        removeValidation($(this), unobtrusiveValidation);
    });
    if ($selector.attr('data-val') === 'true') {
        removeValidation($selector, unobtrusiveValidation);
    }
    $.validator.unobtrusive.syncValdators($form);
};

function removeValidation($element, unobtrusiveValidation) {
    var elname = $element.attr('name');
    if (elname !== undefined) {
        $element.rules('remove');
        if (unobtrusiveValidation) {
            if (unobtrusiveValidation.options.rules[elname]) {
                delete unobtrusiveValidation.options.rules[elname];
            }
            if (unobtrusiveValidation.options.messages[elname]) {
                delete unobtrusiveValidation.options.messages[elname];
            }
        }
    }
}

es also im Grunde funktioniert immer noch die gleichen wie Xhalent Lösung oben, aber ich hinzugefügt, um die Fähigkeit, Regeln zu entfernen für Elemente, die Sie aus dem Dom entfernen. Also, wenn Sie Elemente aus dem Dom entfernen, und Sie möchten diese Prüfregeln rufen auch dann entfernt:

$.validator.unobtrusive.unparseContent('input.something');

Answer 7

Warum nicht benutzen die Regeln funktionieren direkt von Jquery Validierung doc. Wie folgt aus:

$('#newField0').rules('add', {
    required: true,
    minlength: 2
});
//use Html.ValidationMessage will renders a span element, unobtrusive need it to display errors
$('@Html.ValidationMessage("newField0")').insertAfter('#newField0');

Answer 8

fand ich @ Xhalent Code Skript in meinem Code und wollte es löschen, weil ich es nicht verwenden war, was mich zu dieser Frage SO führen.

Dieser Code ist ziemlich sauber und einfach:

jQuery.fn.unobtrusiveValidationForceBind = function () {
    //If you try to parse a form that is already parsed it won't update
    var $form = this
       .removeData("validator") /* added by the raw jquery.validate plugin */
            .removeData("unobtrusiveValidation");  /* added by the jquery     unobtrusive plugin */

    $form.bindUnobtrusiveValidation();
}

Dann diese jQuery-Erweiterung zu nennen, nur einen Selektor verwenden greifen Sie bilden:

$('#formStart').unobtrusiveValidationForceBind();

Viola!

Answer 9

Ich habe versucht viggity Antwort und zunächst alles schien zu funktionieren. Aber nach einer Weile bemerkte ich, dass die Validierung wird quälend langsam die dynamischen Elemente, die ich hinzugefügt. Der Grund dafür war, dass seine Lösung nicht unbind die Event-Handler, sondern neues zu jeder Zeit hinzufügen. Also, wenn Sie hinzufügen, 5 Elemente ist die Validierung 6 Mal statt nur einmal ausgeführt. Um dies zu beheben Sie die Ereignisse zusätzlich zu den removeData Anrufe zu lösen haben.

$("form").removeData("validator")
         .removeData("unobtrusiveValidation")
         .off("submit.validate click.validate focusin.validate focusout.validate keyup.validate invalid-form.validate");
$.validator.unobtrusive.parse("form");

Answer 10

Bei dynamischen Inhalten müssen Sie Unauffällig Validierungen aktualisieren, wie unten und überprüfen, ob Form gültig ist, während einreichen.

function UpdateUnobtrusiveValidations(idForm) {
    $(idForm).removeData("validator").removeData("unobtrusiveValidation");
    $.validator.unobtrusive.parse($(idForm));
};


$('#idDivPage').on('click', '#idSave', function (e) {
    e.preventDefault();
    if (!$('#idForm').valid()) {
        // Form is invalid … so return
        return false;
    }
    else {
        // post data to server using ajax call
        // update Unobtrusive Validations again
        UpdateUnobtrusiveValidations('#idForm');
    }
});

Answer 11

Ich habe schon eine Weile mit diesem Hantieren, Verschrottung Lösungen und versuchen Sie es später erneut (wenn ich etwas Zeit hatte, es glauben oder nicht).

Ich bin nicht sicher, ob dieses Verhalten in neueren Versionen von jquery geändert hätte (wir verwenden 1.7.2), da dieser Thread erstellt oder zuletzt kommentiert, aber ich fand, dass .parseElement(inputElement) funktioniert gut, wenn ich versuche, dynamisch erstellt hinzufügen Elemente in eine Form, die bereits einen Validator geladen hat. Dies wurde bereits vorgeschlagen, durch @jamesfm (15. Februar '11) in einer der Kommentare oben, aber ich übersehen sie die ersten paar Male war ich daran gearbeitet. Also habe ich es als eine separate Antwort bin das Hinzufügen, um es klar, und weil ich denke, es ist eine gute Lösung und erfordert nicht so viel Aufwand. Es ist vielleicht nicht in den folgenden Antworten erhöht für alle Fragen relevant sein, aber ich denke, es wäre eine Lösung, auf die ursprüngliche Frage sein. Hier ist, wie ich habe ich arbeiten:

//row & textarea created dynamically by an async ajax call further up in the code
var row = ...; //row reference from somewhere
var textarea = row.find("textarea");
textarea.val("[someValue]");

//add max length rule to the text area
textarea.rules('add', {
    maxlength: 2000
});
//parse the element to enable the validation on the dynamically added element
$.validator.unobtrusive.parseElement(textarea);

Answer 12

Zum einen glaube ich, der Anruf zu .validator sein sollte, nicht überprüfen, dann müssen Sie in die ID der Form

passieren

$.validator.unobtrusive.parse("#id");