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

96

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?

Sam
la source
J'ai eu aussi le même problème, mais dans mvc 2. Je passe par étapes comme: weblogs.asp.net/imranbaloch/archive/2010/07/11/… Cela pourrait aussi vous aider. weblogs.asp.net/imranbaloch/archive/2011/03/05/… J'espère que cette aide :)
Naresh Parmar
2
Notez que la unobtrusive.parsefonction prend un sélecteur comme argument, pas comme élément.
Fred

Réponses:

226

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.

Nadeem Khedr
la source
17
Mec tu rock, totalement sauvé ma journée! Réponse géniale!
Dimitar Dimitrov
J'avais peur de l'inviter moi-même. Le script de cette page fonctionne comme un charme.
cezarypiatek
Code, fonctionne très bien - mise à jour rapide (si je peux) 1. J'utilise knockout et j'obtiens bien les noms des champs, cela ressemble à un problème. $ .validator.unobtrusive.parseDynamicContent ('formulaire'); (pour obtenir tous les champs), à la fin lors de la soumission. 2. C'est bien johnnyreilly.github.io/jQuery.Validation.Unobtrusive.Native/… pour vous donner un moyen de nommer les champs (ce qui semble être obligatoire? J'utilise jquery un bootstrap non intrusif sur les 2 autres donc mon les circonstances sont probablement différentes)
Richard Housham
Veuillez simplement noter que tous les paramètres spécifiques au formulaire auxquels vous avez appliqué $("form").data("validator").settingsseront supprimés $(formSelector).removeData("validator")et remplacés par les paramètres par défaut $.validator.defaultslors de la nouvelle analyse du formulaire. C'est un excellent moyen d'inclure des champs dynamiques, mais assurez-vous de répéter tout code d'initialisation personnalisé à chaque nouvelle analyse.
KyleMit
19

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.

Mark Jerzykowski
la source
salut, je suis confronté au même problème. im montrant ma vue dynamique dans un pop up (dialogue jquery). les validations discrètes ne fonctionnent pas. où dois-je appeler $ (form) .valid () dans ma vue dynamique ou ailleurs?
mmssaann
J'étais toujours en train d'empêcher la soumission du formulaire en renvoyant false dans $ (form) .submit parce que je faisais une soumission AJAX, mais j'avais alors besoin d'un moyen de ne pas appeler la soumission AJAX lorsque la validation échouait. $ (form) .valid () est la réponse! Je vous remercie!
jgerman
6

ajoutez ceci à votre _Layout.cshtml

 $(function () {
        //parsing the unobtrusive attributes when we get content via ajax
        $(document).ajaxComplete(function () {
            $.validator.unobtrusive.parse(document);
        });
    });
AHmed Ibrahim
la source
3
Ceci est particulièrement inefficace.
Liam
5

É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.

Rabadash8820
la source
3

tester ceci:

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

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.

Geai
la source
1
Celui-ci est travaillé pour moi. Je trouvais une solution ces derniers jours, cela fonctionne dans le noyau asp.net 2. Merci.
Pradip Rupareliya
0

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>

;)

mohammad miraali
la source