web-dev-qa-db-fra.com

validation non intrusive ne fonctionne pas avec le contenu dynamique

Je ne parviens pas à faire en sorte que la validation jquery discrète fonctionne avec une vue partielle chargée de manière dynamique 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 de soumission 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), la validation fonctionne parfaitement.

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 suffire à laisser le validateur parler des nouveaux contrôles chargés ...

Quelqu'un peut-il aider? 

asp.net-mvc-4unobtrusive-validation
81
Sam

Si vous essayez d'analyser un formulaire 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 de la manière suivante:

    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 données unobtrusiveValidation du formulaire à l'aide de la méthode jquery data:

    $(form).data('unobtrusiveValidation')

    accédez ensuite à 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 Application d’une validation jquery non intrusive au contenu dynamique dans ASP.Net MVC pour un plug-in utilisé pour ajouter des éléments dynamiques à un formulaire. Ce plugin utilise la 2ème solution.

199
Nadeem Khedr

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

Si vous avez chargé dynamiquement un formulaire dans votre DOM, puis appelez

jQuery.validator.unobtrusive.parse(form);

(avec les bits supplémentaires mentionnés) et allez ensuite soumettre ce formulaire en utilisant ajax

$(form).valid()

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

18
Mark Jerzykowski

ajoutez ceci à votre _Layout.cshtml

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

testez ceci:

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

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 de sauvegarder le formulaire.

Je sauvegardais le formulaire via un appel Ajax.

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

1
Jay

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

1
Rabadash8820

il suffit de copier à nouveau ce code en fin de code modal 

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

;)

0
mohammad miraali