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

Question

J'ai des difficultés à faire fonctionner la validation jquery discrète avec une vue partielle chargée dynamiquement par 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 contrôleur :

    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 boîte de texte, l'événement submit affiche l'alerte ('valid').

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")); ce qui devrait suffire à informer le validateur des contrôles nouvellement chargés...

Quelqu'un peut-il m'aider ?

Answer 1

Si vous essayez d'analyser un formulaire qui a déjà été 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 pourriez 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 à l'écran du formulaire unobtrusiveValidation données en utilisant l'outil jquery data método:

   $(form).data('unobtrusiveValidation')

   puis accéder à la collection de règles et ajouter les attributs des nouveaux éléments (ce qui est quelque peu compliqué).

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

Answer 2

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

Si vous avez chargé un formulaire dans votre DOM de manière dynamique et que vous avez ensuite appelé

jQuery.validator.unobtrusive.parse(form); 

(avec les éléments supplémentaires mentionnés) et que vous allez ensuite soumettre ce formulaire en utilisant ajax, n'oubliez pas d'appeler

$(form).valid()

qui renvoie un message vrai ou faux (et exécute la validation réelle) avant que vous ne soumettiez votre formulaire.

Answer 3

De manière surprenante, lorsque j'ai consulté cette question, les documents officiels d'ASP.NET ne contenaient toujours pas d'informations sur l'utilisation discrète de l'option parse() ou comment l'utiliser avec du contenu dynamique. J'ai pris la liberté de créer un numéro à la docs repo (en faisant référence à la réponse originale de @Nadeem) et en soumettant une pull request pour corriger le problème. Cette information est maintenant visible dans le validation côté client section du thème de la validation du modèle.

Answer 4

Ajoutez ceci à votre _Layout.cshtml

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

Answer 5

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.

Je sauvegardais le formulaire par un appel Ajax.

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