la validation discrète ne fonctionne pas avec le contenu dynamique

J'ai des problèmes pour essayer de faire fonctionner la validation discrète de jquery avec une vue partielle chargée dynamiquement via un appel AJAX.

J'ai passé des jours à essayer de faire fonctionner ce code sans succès.

Voici la vue:

@model MvcApplication2.Models.test

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

La vue partielle:

@model MvcApplication2.Models.test

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

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

Le modèle:

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

Le controlle:

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

et enfin, le 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;
    }
});

La validation ne fonctionne pas. Même si je ne remplis aucune information dans la texbox, l'événement submit affiche l'alerte («valide»).

Cependant, si au lieu de charger dynamiquement la vue, j'utilise @Html.Partial("test", Model)pour rendre la vue partielle dans la vue principale (et je ne fais pas l'appel AJAX), alors la validation fonctionne très bien.

C'est probablement parce que si je charge le contenu dynamiquement, les contrôles n'existent pas encore dans le DOM. Mais je fais un appel $.validator.unobtrusive.parse($("#res")); qui devrait être suffisant pour laisser le validateur sur les contrôles nouvellement chargés ...

Quelqu'un peut-il aider?

Si vous essayez d'analyser un formulaire qui est déjà analysé, il ne sera pas mis à jour

Ce que vous pouvez faire lorsque vous ajoutez un élément dynamique au formulaire est soit

1. Vous pouvez supprimer la validation du formulaire et le valider à nouveau comme ceci:

   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. Accédez aux unobtrusiveValidationdonnées du formulaire en utilisant la dataméthode jquery :

   $(form).data('unobtrusiveValidation')

   puis accédez à la collection de règles et ajoutez les nouveaux attributs d'éléments (ce qui est un peu compliqué).

Vous pouvez également consulter cet article sur l' application d'une validation jquery discrète au contenu dynamique dans ASP.Net MVC pour un plugin utilisé pour ajouter des éléments dynamiques à un formulaire. Ce plugin utilise la 2ème solution.

En complément de la réponse de Nadeem Khedr ...

Si vous avez chargé un formulaire dans votre DOM de manière dynamique, puis appelez

jQuery.validator.unobtrusive.parse(form); 

(avec les bits supplémentaires mentionnés) et vont ensuite soumettre ce formulaire en utilisant ajax n'oubliez pas d'appeler

$(form).valid()

qui renvoie vrai ou faux (et exécute la validation réelle) avant de soumettre votre formulaire.

ajoutez ceci à votre _Layout.cshtml

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

Étonnamment, lorsque j'ai lu cette question, les documents officiels ASP.NET ne contenaient toujours aucune information sur la parse()méthode discrète ou sur la façon de l'utiliser avec du contenu dynamique. J'ai pris la liberté de créer un problème dans le référentiel docs (en référence à la réponse originale de @ Nadeem) et de soumettre une demande de tirage pour le résoudre. Ces informations sont désormais visibles dans la section de validation côté client de la rubrique de validation de modèle.

tester ceci:

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

J'ai été frappé dans le même problème et rien n'a fonctionné sauf ceci:

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

et ajouter

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

où vous essayez d'enregistrer le formulaire.

J'enregistrais le formulaire via un appel Ajax.

J'espère que cela aidera quelqu'un.

recopiez simplement ce code à la fin du code modal

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

;)