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

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

1. jquery.validate.js
2. jquery.validate.unobtrusive.js

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:

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

J’ai regardé dans App_Start / BundleConfig.cs et, bien entendu, le bundle de validation JQuery n’avait pas été défini dans RegisterBundles . Je devais append:

 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 indéfini. Même une erreur d’exécution permanente serait préférable à un échec silencieux. 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 append via NuGet (“Microsoft JQuery Unobtrusive Validation”).

Avez-vous vérifié dans web.config?

Sinon, cela donne une bonne vue d’ensemble: ASP.NET MVC 3: étapes requirejses pour la validation discrète côté client du contenu dynamic / AJAX . Également valable pour MVC5.

Au bas de la page, ajoutez:

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

et tout ira bien.

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.

J’avais le même problème lorsque je jouais avec mon premier projet MVC. La question était à la fin que je n’ai pas inclus les éléments d’entrée à 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) } 

Puisque tour utilise MVC au lieu d’append à chaque vue de modification, vous pouvez append le dossier view / shared à _Layout.cshtml.

il suffit d’append

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

au bas de _Layout.cshtml, au-dessus de

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

dans ce cas, le script affectera chaque page utilisant cette disposition.

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 entraîner des problèmes, ainsi je crée 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éez un nouveau ~ / Compte / _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 tels:

     @Styles.Render("~/Content/accountcss") @Scripts.Render("~/bundles/modernizr") @this.RenderSection("MetaContent", false) @this.RenderSection("Styles", false)  @Scripts.Render("~/bundles/accountjs") @this.RenderSection("Scripts", false)  

* NOTE: Assurez-vous que le bootstrap est après le paquet jqueryval

5. Assurez-vous que vous avez bien @Html.ValidationMessageFor pour chaque champ de saisie dans ~ / Account / Login.cshtml , ~ / Account / Register.cshtml , etc.

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

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"),SsortingngLength(25, ErrorMessage = "The {0} must be at least {2} characters long and no bigger than {1} characters.", MinimumLength = 5)] public ssortingng UserName { get; set; } 

7. (facultatif) Enfin, si vous avez modifié le DataAnotation for Password, vous DEVEZ également modifier 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 sur les rôles, etc.

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