unauffällige Validierung funktioniert nicht mit dynamischen Inhalten

96

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 ?

Sam
quelle
Ich hatte auch das gleiche Problem, aber in mvc 2. gehe ich Schritt für Schritt durch als: weblogs.asp.net/imranbaloch/archive/2010/07/11/… Dies könnte Ihnen auch helfen. weblogs.asp.net/imranbaloch/archive/2011/03/05/… Hoffe diese Hilfe :)
Naresh Parmar
2
Beachten Sie, dass die unobtrusive.parseFunktion einen Selektor als Argument und nicht als Element verwendet.
Fred

Antworten:

226

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.

Nadeem Khedr
quelle
17
Alter, du rockst, habe meinen Tag total gerettet! Super Antwort!
Dimitar Dimitrov
Ich hatte Angst, dass ich es selbst einladen sollte. Das Skript von dieser Seite funktioniert wie ein Zauber.
Cezarypiatek
Code, funktioniert großartig - schnelles Update (wenn ich darf) 1. Ich verwende Knockout und bekomme die Namen der Felder gut, es sieht also nach einem Problem aus. $ .validator.unobtrusive.parseDynamicContent ('form'); (um alle Felder zu erhalten), am Ende beim Absenden. 2. Das ist nett, johnnyreilly.github.io/jQuery.Validation.Unobtrusive.Native/… , um Ihnen eine Möglichkeit zu geben, die Felder zu benennen (was scheint erforderlich zu sein? Ich verwende jquery unbtrusive bootstrap auf den anderen 2, also meine Umstände sind wahrscheinlich anders)
Richard Housham
Nur ein Hinweis, dass alle formularspezifischen Einstellungen, auf die Sie angewendet haben, beim Reparieren des Formulars $("form").data("validator").settingsentfernt $(formSelector).removeData("validator")und durch die $.validator.defaultsStandardeinstellungen 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.
KyleMit
19

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.

Mark Jerzykowski
quelle
Hallo, ich stehe vor dem gleichen Problem. Ich zeige meine dynamische Ansicht in einem Popup (jquery Dialog). Die unauffälligen Validierungen funktionieren nicht. Wo rufe ich in meiner dynamischen Ansicht $ (form) .valid () auf oder wo sonst?
mmssaann
Ich habe immer verhindert, dass das Formular gesendet wird, indem ich false in $ (form) .submit zurückgegeben habe, weil ich eine AJAX-Übermittlung durchgeführt habe, aber dann brauchte ich eine Möglichkeit, die AJAX-Übermittlung nicht aufzurufen, wenn die Validierung fehlschlug. $ (form) .valid () ist die Antwort! Danke dir!
Jgerman
6

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);
        });
    });
AHmed Ibrahim
quelle
3
Dies ist besonders ineffizient.
Liam
5

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 .

Rabadash8820
quelle
3

Testen Sie dies:

if ($.validator.unobtrusive != undefined) {
    $.validator.unobtrusive.parse("form");
}
Omid-RH
quelle
2

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.

Jay
quelle
1
Dieser ist für mich gearbeitet. Ich habe in den letzten Tagen eine Lösung gefunden. Sie funktioniert in asp.net Core 2. Danke.
Pradip Rupareliya
0

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>

;)

mohammad miraali
quelle