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 ?
unobtrusive.parse
Funktion einen Selektor als Argument und nicht als Element verwendet.Antworten:
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:
Sie können die Validierung des Formulars entfernen und wie folgt erneut validieren:
unobtrusiveValidation
Greifen Sie mit der jquery-data
Methode auf die Daten des Formulars zu :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.
quelle
$("form").data("validator").settings
entfernt$(formSelector).removeData("validator")
und durch die$.validator.defaults
Standardeinstellungen ersetzt werden. Dies ist eine großartige Möglichkeit, dynamische Felder einzuschließen. Stellen Sie jedoch sicher, dass Sie jeden benutzerdefinierten Initialisierungscode für jede neue Analyse wiederholen.Als Ergänzung zu Nadeem Kheders Antwort ....
Wenn Sie ein Formular dynamisch in Ihr DOM geladen haben und dann anrufen
(mit den genannten zusätzlichen Bits) und werden dann dieses Formular mit Ajax senden. Denken Sie daran, anzurufen
Dies gibt true oder false zurück (und führt die eigentliche Validierung aus), bevor Sie Ihr Formular senden.
quelle
Fügen Sie dies Ihrer _Layout.cshtml hinzu
quelle
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 .quelle
Testen Sie dies:
quelle
Ich hatte das gleiche Problem und nichts funktionierte außer diesem:
und hinzufügen
wo Sie versuchen, das Formular zu speichern.
Ich habe das Formular über einen Ajax-Anruf gespeichert.
Hoffe das wird jemandem helfen.
quelle
Kopieren Sie diesen Code am Ende des Modalcodes erneut
;)
quelle