web-dev-qa-db-fra.com

La validation côté client ne fonctionne pas dans ASP.NET MVC5 avec Bootstrap

En exécutant Visual Studio 2013, j'ai créé un nouveau projet ASP.NET MVC (5) avec Bootstrap.

Cependant, je ne parviens pas à obtenir une validation discrète côté client.

Le modèle a des attributs [Required] sur les propriétés pertinentes et la vue comporte des balises ValidationMessageFor... pour chaque champ du formulaire.

Cependant, l'envoi du formulaire entraîne sa publication sur le serveur avant que les messages de validation ne s'affichent.

En utilisant NuGet, j'ai installé jquery.validate et jquery.validate.unobtrusive et les ai ajoutés au paquet jQuery dans App_Start.

Pourtant, il continue à poster obstinément sur le serveur. F12 dev tools n'affiche aucune erreur/alerte JS.

Quelqu'un d'autre a-t-il rencontré ce problème (ne voit rien dans SO concernant MVC 5 en particulier) et avez-vous des idées?

jqueryasp.netasp.net-mvctwitter-bootstrapasp.net-mvc-5
27
SimonGoldstone

J'avais le même problème. La solution consiste à ajouter une référence .js à la page maître (_Layout.cshtml).

  1. jquery.validate.js 
  2. jquery.validate.unobtrusive.js
21
user2934829

J'ai eu le même problème. En comparant le code HTML généré avec un site qui fonctionnait, j'ai remarqué qu'à la fin du document, il y avait ceci:

<script src="/bundles/jqueryval"></script>

... alors que le paquet aurait dû être étendu comme ceci:

<script src="/Scripts/jquery.validate.js"></script>
<script src="/Scripts/jquery.validate.unobtrusive.js"></script>

J'ai regardé dans App_Start/BundleConfig.cs, et le paquet de validation JQuery n'avait pas été défini dans RegisterBundles. Je devais ajouter:

bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                    "~/Scripts/jquery.validate*"));

Pourquoi cela manquait, je ne sais pas. J'ai commencé avec un nouveau projet propre.

C'est plutôt dommage qu'il n'y ait pas d'erreur de compilation lorsque vous faites référence à un paquet non défini. Même une erreur d'exécution permanente serait préférable à une défaillance silencieuse. Tant de temps perdu!

EDIT: s’avère que je n’avais pas non plus les scripts de validation JQuery dans mon projet. Je devais les ajouter via NuGet ("Microsoft JQuery Unobtrusive Validation").

19
Gary McGill

Avez-vous vérifié <add key="ClientValidationEnabled" value="true" /> dans web.config?

Sinon, cela donne un bon aperçu: ASP.NET MVC 3: étapes requises pour la validation discrète côté client du contenu dynamique/AJAX . Également valable pour MVC5.

14
flip

Au bas de la page, ajoutez:

@Scripts.Render("~/bundles/jqueryval")

et tout ira bien.

7
Maulik Anand

J'avais le même problème lorsque je jouais avec mon premier projet MVC. La question était à la fin que je n'incluais pas les éléments d'entrée dans l'élément de formulaire . Oui, très stupide. Assurez-vous de créer le formulaire, par exemple:

@using (Html.BeginForm())
{
    @Html.EditorFor(model => model.FieldA)
    @Html.ValidationMessageFor(model => model.FieldA)

    @Html.EditorFor(model => model.FieldB)
    @Html.ValidationMessageFor(model => model.FieldB)

}
2
veb

Je sais que c'est un peu tard pour le jeu, mais cela ajoute plus à la validation et je l'ai trouvé très utile. Parfois, des références javascript/jQuery Plugin/API conflictuelles (par exemple, searchMeme.js) faisant référence à d'autres versions de jquery peuvent poser problème, je crée donc des ensembles uniques pour les actions de connexion à un compte. Ce sont les étapes que je prendrais:

1. Créez une mise en page distincte ~/Views/Shared/_AccountLayout.cshtml pour AccountController.cs. 

2. Créer un nouveau ~/Account/_ViewStart.csthml avec:

@{
    Layout = "~/Views/Shared/_AccountLayout.cshtml";
}

3. Créez deux ensembles pour css & js dans BundleConfig.cs pour AccountController:

   bundles.Add(new StyleBundle("~/Content/accountcss").Include(
                "~/Content/site.css",
                "~/Content/bootstrap.css",
                "~/Content/font-awesome.css")); /*if using font-awesome */

   bundles.Add(new ScriptBundle("~/bundles/accountjs").Include(
                "~/Scripts/jquery-1.10.2.js",
                "~/Scripts/jquery.validate.js",
                "~/Scripts/jquery.validate.unobtrusive.js",
                "~/Scripts/bootstrap.js"));//must be after jquery validate

4. Référencez les ensembles aux deux extrémités de head & body dans _AccountLayout.cshtml en tant que tel:

        <title>@ViewBag.Title</title>
        <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
        <meta name="viewport" content="width=device-width" />
         @Styles.Render("~/Content/accountcss")
        @Scripts.Render("~/bundles/modernizr")
        @this.RenderSection("MetaContent", false)
        @this.RenderSection("Styles", false)
        </head>

        @Scripts.Render("~/bundles/accountjs")
        @this.RenderSection("Scripts", false)
        </body>

* REMARQUE: assurez-vous que l'amorçage est effectué après jqueryval

5. Assurez-vous d'avoir @Html.ValidationMessageFor pour chaque champ de saisie dans ~/Account/Login.cshtml, ~/Account/Register.cshtml, etc ... respectivement.

<div class="form-group">
       @Html.LabelFor(m => m.UserName, new { @class = "col-md-2 control-label" })
          <div class="col-md-10">
               @Html.TextBoxFor(m => m.UserName, new { @class = "form-control" })
               @Html.ValidationMessageFor(m => m.UserName, "", new { @class = "text-danger" })
          </div>
</div>

6. Utilisez DataAnnotations pour créer des erreurs de validation personnalisées supplémentaires. [RegularExpression(@"^([\w]{2,20})@?([\w]{2,20}).?[a-zA-Z]{2,3}$", ErrorMessage="")]:

[Required(ErrorMessage = "*Username is required."), RegularExpression(@"^[\w+]{3,10}\s?([\w+]{3,15})$", ErrorMessage = "*Username can only be Alphanumeric"),StringLength(25, ErrorMessage = "The {0} must be at least {2} characters long and no bigger than {1} characters.", MinimumLength = 5)]
public string UserName { get; set; }

7. (facultatif) Enfin, si vous avez modifié le DataAnotation for Password, vous DEVEZ modifier également la stratégie de mot de passe dans ~/App_Start/IdentityConfig.cs en tant que tel:

manager.PasswordValidator = new PasswordValidator
{
    RequiredLength = 6,
    RequireNonLetterOrDigit = false,
    RequireDigit = true,
    RequireLowercase = true,
    RequireUppercase = true,
};

8. (facultatif) Consultez également cet article article sur les rôles, etc. 

2
yardpenalty

J'ai eu le même problème, ma solution est clair tout l'historique dans le navigateur (cache, cookies, formulaire, ...) et tout fonctionne correctement.

2
Kien

Je donne cette réponse aux futurs lecteurs.Je traitais du même problème et trouve que le problème est lié à la séquence des scripts de rendu. Assure-toi 

@Scripts.Render("~/bundles/jquery")

est avant

@Scripts.Render("~/bundles/jqueryval")

dans _layout.cshtml . La partie inférieure de la présentation devrait ressembler à celle qui suit.

@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/jqueryval")
@Scripts.Render("~/bundles/bootstrap")
0
Garry

Je pense que @ Html.ValidationMessageFor est absent du modèle. Je reçois les erreurs, mais pas les messages.

0
jgarza