jquery.validate.unobtrusive non funziona con elementi dinamici iniettato

Question

sto lavorando con ASP.Net MVC3, il modo più semplice per utilizzare la convalida del client sarebbe permettendo al jquery.validate.unobtrusive. Tutto funziona bene, per le cose che fa da server.

Ma quando provo a iniettare qualche nuova 'input' con javascript, e sapevo che ho bisogno di chiamata $.validator.unobtrusive.parse() per rilegare le convalide. Ma ancora, tutti coloro dinamica iniettato campi non sono funzionanti.

Ancora peggio, cerco di manualmente legano usando jquery.validate e non funziona neanche. Ogni pensiero?

Answer 1

Ho creato un'estensione per la libreria jquery.validate.unobtrusive che ha risolto questo problema per la mia situazione -. Potrebbe essere di interesse

http://xhalent.wordpress.com/2011/ 24/01 / applicando-discreto-validazione-to-dinamico-content /

Answer 2

Ho provato l'approccio di Xhalent ma purtroppo non funzionava per me. L'approccio di Robin ha funzionato e non ha funzionato. Ha funzionato alla grande per gli elementi aggiunti in modo dinamico, ma se si è tentato di utilizzare JQuery per rimuovere tutti gli attributi di convalida e campate del DOM, la biblioteca convalida ancora avrebbe cercato di convalidare loro.

Tuttavia, se si rimuove i dati "unobtrusiveValidation" del modulo, oltre a "validationData", ha funzionato come un fascino per aggiungere in modo dinamico e la rimozione di elementi che si desidera validato o non validati.

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

Answer 3

Io in realtà piace molto la semplicità di @viggity e la soluzione @Robins, così ho girato in un piccolo plug-in rapido:

(function ($) {

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

        $.validator.unobtrusive.parse(form);

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

Esempio di utilizzo:

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

Answer 4

Sto avendo lo stesso problema. Ho scoperto che non è possibile chiamare $ .validator.unobtrusive.parse () sullo stesso modulo per due volte. Quando si carica il modulo inizialmente dal server il modulo viene analizzato automaticamente dalla libreria non invadente. Quando si aggiunge un elemento di input dinamicamente al form e chiamare $ .validator.unobtrusive.parse () ancora una volta, non funzionerà. Lo stesso vale per parseElement ().

Il lib discreto chiama il metodo validate del jquery validate plugin per impostare tutte le regole e messaggi. Il problema è che, quando viene chiamato ancora una volta, il plugin non aggiorna il nuovo set di regole la sua data.

Ho trovato una soluzione grezza: Prima di chiamare il metodo parse sulla lib unobstrusive, butto via la forma validatore:

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

Ora, quando il metodo validate viene chiamato dal lib discreto, tutte le regole ei messaggi vengono ricreate tra cui gli ingressi aggiunti in modo dinamico.

Spero che questo aiuti

Answer 5

Sto usando MVC 4 e JQuery 1.8, ha il seguente pezzo di codice è necessario per consentire jQuery per la validazione dei contenuti iniettato dinamicamente tramite Ajax, o Jquery nel DOM.

Ho fatto una funzione modulare che accetta l'oggetto Jquery dell'elemento appena aggiunto. Se è stato clonato una nuova tabella con tblContacts id utilizzando jQuery su clic di un pulsante, quindi includere la funzione di seguito nel file js

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.
}

e chiamare in questo modo:

fnValidateDynamicContent("#tblContacts")

Answer 6

Prendendo dalla soluzione di Xhalent contrassegnato come risposta di cui sopra, ho ampliato su di esso un po '.

$.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];
            }
        }
    }
}

Quindi, in pratica funziona ancora lo stesso come la soluzione di Xhalent sopra, ma ho aggiunto la possibilità di rimuovere le regole per gli elementi di rimuovere dalla dom. Così, quando si rimuove elementi dal Dom e si desidera che tali regole di validazione rimossi anche quindi chiamare:

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

Answer 7

Perché non usare le regole funzionano direttamente dal doc convalida jQuery. In questo modo:

$('#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

Ho trovato @ codice copione di Xhalent nel mio codice e stavo per eliminarlo perché non stavo usando esso, che mi portano a questa domanda SO.

Questo codice è abbastanza semplice e pulito:

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();
}

Quindi, per chiamare questa estensione jQuery, basta usare un selettore per afferrare si forma:

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

Viola!

Answer 9

ho cercato la risposta di viggity e in un primo momento tutto sembrava lavoro. Ma dopo un po 'ho notato che la convalida diventa dolorosamente lenti i più dinamicamente elementi che ho aggiunto. Il motivo era che la sua soluzione non fa unbind i gestori di eventi, ma aggiungerne di nuove ogni volta. Quindi, se si aggiunge 5 articoli la convalida viene eseguita 6 volte invece di una sola volta. Per risolvere questo problema è necessario separare gli eventi in aggiunta alle chiamate REMOVEDATA.

$("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

In caso di contenuti dinamici è necessario aggiornare discreto convalide come sottostante e verifica se Form è valida fino ad esaurimento della presentazione.

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

Sono stato trafficando con questo per un po ', la demolizione e cercando le soluzioni più tardi (quando ho avuto qualche tempo libero, che ci crediate o no).

Non sono sicuro se questo comportamento avrebbe cambiato nelle versioni più recenti di jQuery (stiamo usando 1.7.2), in quanto questa discussione è stato creato o commentati Ultimo, ma ho scoperto che .parseElement(inputElement) funziona bene quando provo ad aggiungere creata dinamicamente elementi ad una forma che ha già un validatore caricata. Questo è stato già suggerito da @jamesfm (15 febbraio '11) in una delle osservazioni di cui sopra, ma ho trascurato che le prime volte stavo lavorando su questo. Così sto aggiungendo come una risposta separata per renderlo più evidente e perché penso che sia una buona soluzione e non richiede così tanto in testa. Potrebbe non essere rilevante per tutte le questioni sollevate nelle risposte successive, ma penso che sarebbe una soluzione alla domanda iniziale. Ecco come ho ottenuto il mio lavoro:

//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

In primo luogo, penso che la chiamata deve essere quello di .validator, non validate allora avete bisogno di passare l'id del modulo

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