dyskretna weryfikacja nie działa z zawartością dynamiczną

Mam problemy z próbą uzyskania dyskretnej walidacji jQuery do pracy z częściowym widokiem, który jest ładowany dynamicznie przez wywołanie AJAX.

Spędziłem dni próbując zmusić ten kod do działania bez powodzenia.

Oto widok:

@model MvcApplication2.Models.test

@using (Html.BeginForm())
{
 @Html.ValidationSummary(true);
 <div id="res"></div>
 <input id="submit" type="submit" value="submit" />
}

Częściowy widok:

@model MvcApplication2.Models.test

@Html.TextAreaFor(m => m.MyProperty);
@Html.ValidationMessageFor(m => m.MyProperty);

<script type="text/javascript" >
  $.validator.unobtrusive.parse(document);
</script>

Model:

  public class test
  {
    [Required(ErrorMessage= "required field")]
    public int MyProperty { get; set; }
  }

Kontroler:

    public ActionResult GetView()
    {
        return PartialView("Test");
    }

i na koniec javascript:

$(doument).ready(function () {
$.ajax({
    url: '/test/getview',
    success: function (res) {

        $("#res").html(res);
        $.validator.unobtrusive.parse($("#res"));
    }
});

$("#submit").click(function () {
    if ($("form").valid()) {
        alert('valid');
        return true;
    } else {
        alert('not valid');
        return false;
    }
});

Walidacja nie działa. Nawet jeśli nie wypełnię żadnych informacji w polu tekstowym, zdarzenie przesyłania pokazuje alert („ważny”).

Jeśli jednak zamiast dynamicznie ładować widok, używam @Html.Partial("test", Model)do renderowania częściowego widoku w głównym widoku (i nie wykonuję wywołania AJAX), wtedy walidacja działa dobrze.

Dzieje się tak prawdopodobnie dlatego, że jeśli ładuję zawartość dynamicznie, kontrolki jeszcze nie istnieją w DOM. Ale wykonuję wywołanie, $.validator.unobtrusive.parse($("#res")); które powinno wystarczyć, aby pozwolić walidatorowi o nowo załadowanych kontrolkach ...

Czy ktoś może pomóc?

Jeśli spróbujesz przeanalizować formularz, który został już przeanalizowany, nie zostanie on zaktualizowany

To, co możesz zrobić, dodając element dynamiczny do formularza, to jedno i drugie

1. Możesz usunąć weryfikację formularza i ponownie ją zweryfikować w następujący sposób:

   var form = $(formSelector)
       .removeData("validator") /* added by the raw jquery.validate plugin */
       .removeData("unobtrusiveValidation");  /* added by the jquery unobtrusive plugin*/
   
   $.validator.unobtrusive.parse(form);
   

2. Uzyskaj dostęp do unobtrusiveValidationdanych formularza za pomocą datametody jQuery :

   $(form).data('unobtrusiveValidation')

   następnie uzyskaj dostęp do kolekcji reguł i dodaj nowe atrybuty elementów (co jest nieco skomplikowane).

Możesz również zapoznać się z tym artykułem na temat stosowania dyskretnej walidacji jQuery do zawartości dynamicznej w ASP.Net MVC dla wtyczki używanej do dodawania elementów dynamicznych do formularza. Ta wtyczka wykorzystuje drugie rozwiązanie.

Jako dodatek do odpowiedzi Nadeema Khedra ...

Jeśli dynamicznie załadowałeś formularz do swojego DOM, a następnie zadzwoń

jQuery.validator.unobtrusive.parse(form); 

(z wymienionymi dodatkowymi bitami), a następnie wyślemy ten formularz używając AJAX pamiętaj o wywołaniu

$(form).valid()

która zwraca prawdę lub fałsz (i uruchamia faktyczną weryfikację) przed przesłaniem formularza.

dodaj to do swojego _Layout.cshtml

 $(function () {
        //parsing the unobtrusive attributes when we get content via ajax
        $(document).ajaxComplete(function () {
            $.validator.unobtrusive.parse(document);
        });
    });

Co zaskakujące, kiedy przeczytałem to pytanie, oficjalna dokumentacja ASP.NET nadal nie zawierała żadnych informacji o dyskretnej parse()metodzie ani o tym, jak jej używać z dynamiczną zawartością. Pozwoliłem sobie stworzyć problem w repozytorium dokumentów (odwołując się do oryginalnej odpowiedzi @ Nadeem) i przesłać żądanie ściągnięcia, aby go naprawić. Te informacje są teraz widoczne w sekcji walidacji po stronie klienta w temacie walidacji modelu.

przetestuj to:

if ($.validator.unobtrusive != undefined) {
    $.validator.unobtrusive.parse("form");
}

Uderzył mnie ten sam problem i nic nie działało poza tym:

$(document).ready(function () { 
    rebindvalidators();
});

function rebindvalidators() {
    var $form = $("#id-of-form");
    $form.unbind();
    $form.data("validator", null);
    $.validator.unobtrusive.parse($form);
    $form.validate($form.data("unobtrusiveValidation").options);
}

i dodaj

// Check if the form is valid
var $form = $(this.form);
if (!$form.valid())
    return;

gdzie próbujesz zapisać formularz.

Zapisałem formularz przez połączenie Ajax.

Mam nadzieję, że to komuś pomoże.

po prostu skopiuj ten kod ponownie na końcu kodu modalnego

    <script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>

;)