unauffällige Validierung funktioniert nicht mit dynamischen Inhalten

Ich habe Probleme beim Versuch, die unauffällige JQuery-Validierung mit einer Teilansicht zum Laufen zu bringen, die dynamisch über einen AJAX-Aufruf geladen wird.

Ich habe Tage damit verbracht, diesen Code ohne Glück zum Laufen zu bringen.

Hier ist die Ansicht:

@model MvcApplication2.Models.test

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

Die Teilansicht:

@model MvcApplication2.Models.test

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

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

Das Model:

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

Der Controller:

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

und schließlich das 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;
    }
});

Die Validierung funktioniert nicht. Auch wenn ich keine Informationen in die Texbox eingebe, zeigt das Submit-Ereignis die Warnung an ('gültig').

Wenn ich jedoch die Ansicht nicht dynamisch lade, sondern @Html.Partial("test", Model)die Teilansicht in der Hauptansicht rendere (und den AJAX-Aufruf nicht durchführe), funktioniert die Validierung einwandfrei.

Dies liegt wahrscheinlich daran, dass die Steuerelemente im DOM noch nicht vorhanden sind, wenn ich den Inhalt dynamisch lade. Aber ich rufe an, $.validator.unobtrusive.parse($("#res")); was ausreichen sollte, um den Validator über die neu geladenen Steuerelemente zu informieren ...

Kann jemand helfen ?

Wenn Sie versuchen, ein Formular zu analysieren, das bereits analysiert wurde, wird es nicht aktualisiert

Wenn Sie dem Formular ein dynamisches Element hinzufügen, können Sie Folgendes tun:

1. Sie können die Validierung des Formulars entfernen und wie folgt erneut validieren:

   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. unobtrusiveValidationGreifen Sie mit der jquery- dataMethode auf die Daten des Formulars zu :

   $(form).data('unobtrusiveValidation')

   Greifen Sie dann auf die Regelsammlung zu und fügen Sie die neuen Elementattribute hinzu (was etwas kompliziert ist).

In diesem Artikel zum Anwenden einer unauffälligen JQuery-Validierung auf dynamischen Inhalt in ASP.Net MVC finden Sie auch ein Plugin zum Hinzufügen dynamischer Elemente zu einem Formular. Dieses Plugin verwendet die 2. Lösung.

Als Ergänzung zu Nadeem Kheders Antwort ....

Wenn Sie ein Formular dynamisch in Ihr DOM geladen haben und dann anrufen

jQuery.validator.unobtrusive.parse(form); 

(mit den genannten zusätzlichen Bits) und werden dann dieses Formular mit Ajax senden. Denken Sie daran, anzurufen

$(form).valid()

Dies gibt true oder false zurück (und führt die eigentliche Validierung aus), bevor Sie Ihr Formular senden.

Fügen Sie dies Ihrer _Layout.cshtml hinzu

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

Als ich diese Frage betrachtete, hatten die offiziellen ASP.NET-Dokumente überraschenderweise noch keine Informationen über die unauffällige parse()Methode oder deren Verwendung mit dynamischen Inhalten. Ich habe mir erlaubt, ein Problem im Docs Repo zu erstellen (unter Bezugnahme auf die ursprüngliche Antwort von @ Nadeem) und eine Pull-Anfrage zu senden, um das Problem zu beheben. Diese Informationen sind jetzt im Abschnitt zur clientseitigen Validierung des Themas Modellvalidierung sichtbar .

Testen Sie dies:

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

Ich hatte das gleiche Problem und nichts funktionierte außer diesem:

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

und hinzufügen

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

wo Sie versuchen, das Formular zu speichern.

Ich habe das Formular über einen Ajax-Anruf gespeichert.

Hoffe das wird jemandem helfen.

Kopieren Sie diesen Code am Ende des Modalcodes erneut

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

;)