jquery.validate.unobtrusive nie działa z dynamicznymi wstawionymi elementami

Pracuję z ASP.Net MVC3, łatwiejszym sposobem korzystania z walidacji klienta byłoby włączenie jquery.validate.unobtrusive. Wszystko działa dobrze, jeśli chodzi o rzeczy prosto z serwera.

Ale kiedy próbowałem wprowadzić nowe „dane wejściowe” za pomocą javascript i wiedziałem, że muszę zadzwonić, $.validator.unobtrusive.parse()aby ponownie powiązać walidacje. Ale nadal wszystkie te dynamiczne pola wstrzykiwane nie działają.

Co gorsza, próbuję ręcznie bindować używając jquery.validatei to też nie działa. jakieś pomysły?

Stworzyłem rozszerzenie biblioteki jquery.validate.unobtrusive, które rozwiązało ten problem w mojej sytuacji - może być interesujące.

http://xhalent.wordpress.com/2011/01/24/applying-unobtrusive-validation-to-dynamic-content/

Wypróbowałem podejście Xhalenta, ale niestety nie zadziałało. Podejście Robin zadziałało i nie zadziałało. Działało świetnie w przypadku dynamicznie dodawanych elementów, ale jeśli spróbujesz użyć JQuery do usunięcia wszystkich atrybutów walidacji i rozpiętości z DOM, biblioteka walidacyjna nadal będzie próbowała je zweryfikować.

Jeśli jednak oprócz danych „validationData” usuniesz z formularza dane „unobtrusiveValidation”, zadziałało to jak urok do dynamicznego dodawania i usuwania elementów, które chcesz zweryfikować lub nie.

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

Naprawdę podoba mi się prostota rozwiązań @viggity i @Robins, więc przekształciłem je w szybką, małą wtyczkę:

(function ($) {

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

        $.validator.unobtrusive.parse(form);

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

Przykładowe użycie:

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

Mam ten sam problem. Odkryłem, że nie można dwukrotnie wywołać $ .validator.unobtrusive.parse () w tym samym formularzu. Podczas ładowania formularza początkowo z serwera formularz jest analizowany automatycznie przez dyskretną bibliotekę. Gdy dodasz element wejściowy dynamicznie do formularza i ponownie wywołasz $ .validator.unobtrusive.parse (), to nie zadziała. To samo dotyczy parseElement ().

Dyskretna biblioteka wywołuje metodę validate wtyczki jquery validate w celu ustawienia wszystkich reguł i komunikatów. Problem polega na tym, że po ponownym wywołaniu wtyczka nie aktualizuje nowego zestawu reguł, który podał.

Znalazłem jedno prymitywne rozwiązanie: przed wywołaniem metody analizy na dyskretnej bibliotece lib wyrzucam walidator formularzy:

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

Teraz, gdy metoda validate jest wywoływana przez dyskretną bibliotekę, wszystkie reguły i komunikaty są odtwarzane, w tym dynamicznie dodawane dane wejściowe.

Mam nadzieję że to pomoże

Używam MVC 4 i JQuery 1.8, wygląda na to, że następujący fragment kodu jest potrzebny, aby umożliwić Jquery sprawdzanie poprawności zawartości dynamicznie wstrzykiwanej przez Ajax lub Jquery do DOM.

Zrobiłem funkcję modułową, która akceptuje obiekt Jquery nowo dodanego elementu. Jeśli sklonowałeś nową tabelę z identyfikatorem tblContactsza pomocą Jquery po kliknięciu przycisku, dołącz poniższą funkcję do pliku 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.
}

i nazwij to tak:

fnValidateDynamicContent("#tblContacts")

Dlaczego nie użyć funkcji reguł bezpośrednio z dokumentu walidacji jQuery. Lubię to:

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

Czerpiąc z rozwiązania Xhalenta oznaczonego jako odpowiedź powyżej, nieco go rozwinąłem.

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

Więc zasadniczo działa tak samo jak powyższe rozwiązanie Xhalent, ale dodałem możliwość usuwania reguł dla elementów, które usuwasz z domeny. Tak więc, gdy usuniesz elementy z Doma i chcesz, aby te reguły walidacji również zostały usunięte, wywołaj:

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

Znalazłem skrypt kodu @ Xhalent w moim kodzie i zamierzałem go usunąć, ponieważ go nie używałem, co doprowadziło mnie do tego pytania SO.

Ten kod jest całkiem przejrzysty i prosty:

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

Następnie, aby wywołać to rozszerzenie jQuery, po prostu użyj selektora, aby pobrać formularz:

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

Altówka!

Spróbowałem odpowiedzi Viggity i na początku wszystko wydawało się działać. Ale po chwili zauważyłem, że walidacja staje się boleśnie wolniejsza, im bardziej dynamicznie dodawałem pozycje. Powodem było to, że jego rozwiązanie nie usuwa powiązań programów obsługi zdarzeń, ale za każdym razem dodaje nowe. Więc jeśli dodasz 5 pozycji, walidacja zostanie wykonana 6 razy, a nie tylko raz. Aby to naprawić, musisz dodatkowo usunąć powiązanie zdarzeń z wywołaniami removeData.

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

W przypadku zawartości dynamicznej musisz zaktualizować Unobtrusive Validations jak poniżej i sprawdzić, czy Formjest ważny podczas przesyłania.

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

Bawiłem się tym przez jakiś czas, wyrzucając rozwiązania i próbując ponownie później (kiedy miałem trochę wolnego czasu, wierz lub nie).

Nie jestem pewien, czy to zachowanie zmieniłoby się w nowszych wersjach jquery (używamy 1.7.2), odkąd ten wątek został utworzony lub skomentowany jako ostatni, ale stwierdziłem, że .parseElement(inputElement)działa dobrze, gdy próbuję dodać dynamicznie utworzone elementy do formularza który ma już załadowany walidator. Zasugerował to już @jamesfm (15 lutego 2011) w jednym z powyższych komentarzy, ale przeoczyłem to kilka razy, gdy nad tym pracowałem. Dlatego dodaję to jako oddzielną odpowiedź, aby uczynić ją bardziej oczywistą i ponieważ uważam, że jest to dobre rozwiązanie i nie wymaga tak dużego obciążenia. Może to nie mieć zastosowania do wszystkich kwestii poruszonych w kolejnych odpowiedziach, ale myślę, że byłoby to rozwiązanie pierwotnego pytania. Oto jak sprawiłem, że mój działa:

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

Po pierwsze, myślę, że wywołanie powinno być skierowane do .validator, a nie do walidacji, wtedy musisz podać identyfikator formularza

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

Jeśli chcesz dodawać i usuwać rzeczy z możliwością, że niektóre błędy są już wyświetlane, oto co przyszedłem. Opiera się głównie na różnych pomysłach na tej stronie z pytaniami. Używam wbudowanego destroy()zamiast po prostu usuwać atrybut danych dla walidacji JQuery.

function resetValidator($form: JQuery) {
    $form.validate().destroy();

    //reset unobtrusive validation summary, if it exists
    $form.find("[data-valmsg-summary=true]")
        .removeClass("validation-summary-errors")
        .addClass("validation-summary-valid")
        .find("ul").empty();

    //reset unobtrusive field level, if it exists
    $form.find("[data-valmsg-replace]")
        .removeClass("field-validation-error")
        .addClass("field-validation-valid")
        .empty();

    $form.removeData("unobtrusiveValidation");
}

Wywołujesz to przed dynamiczną modyfikacją danych wejściowych w formularzu. Następnie ponownie zainicjuj walidację po.

resetValidator($form);
//add or remove inputs here ...
$.validator.unobtrusive.parse($form);

Uwaga: Jeśli niektóre lub wszystkie dane wejściowe zostały sprawdzone i zawierają błędy, te błędy zostaną zresetowane ... ale powrócą poprawnie podczas następnej weryfikacji.