Validation côté client ASP.Net MVC 3 avec un formulaire à 3 tabs

Je dois construire un formulaire d’inscription en utilisant asp.net mvc 3 jquery validate. Ce formulaire est composé d’environ 20 champs répartis en 3 tabs JS en raison de l’interface utilisateur et du style de navigation. J’ai écrit toute ma validation sur le côté serveur à travers des annotations dans le modèle de profil:

namespace Web.Models { public class ProfileModel { //companyName [Required(ErrorMessageResourceType = typeof(Core.Resources.Resources), ErrorMessageResourceName = "CompanyNameRequired")] [SsortingngLength(50, ErrorMessageResourceType = typeof(Core.Resources.Resources), ErrorMessageResourceName = "CompanyNameLong")] [Display(Name = "CompanyName_label")] public ssortingng companyName { get; set; } //companyAddress [Required(ErrorMessageResourceType = typeof(Core.Resources.Resources), ErrorMessageResourceName = "CompanyAddressRequired")] [SsortingngLength(50, ErrorMessageResourceType = typeof(Core.Resources.Resources), ErrorMessageResourceName = "CompanyAddressLong")] [Display(Name = "CompanyAddress_label")] public ssortingng companyAddress { get; set; } //companyCity [Required(ErrorMessageResourceType = typeof(Core.Resources.Resources), ErrorMessageResourceName = "CompanyCityRequired")] [SsortingngLength(50, ErrorMessageResourceType = typeof(Core.Resources.Resources), ErrorMessageResourceName = "CompanyCityLong")] [Display(Name = "CompanyCity_label")] public ssortingng companyCity { get; set; } //companyZip [Required(ErrorMessageResourceType = typeof(Core.Resources.Resources), ErrorMessageResourceName = "CompanyZipRequired")] [SsortingngLength(10, ErrorMessageResourceType = typeof(Core.Resources.Resources), ErrorMessageResourceName = "CompanyZipLong")] [Display(Name = "CompanyZip_label")] public ssortingng companyZip { get; set; } ... and so on for a toltal 20 fields ... 

Mes étiquettes de validation se trouvent dans nos fichiers localisés Core-> Resources, le contrôleur de profil est codé pour capturer HTTPPOST et ma vue est la suivante:

 @model Web.Models.ProfileModel @{ Layout = "~/Views/Shared/_Layout.cshtml"; } @Html.ValidationSummary(true) @using (Html.BeginForm("Register", "Profile", FormMethod.Post, new { id = "RegForm" })) { 
@Html.LabelFor(model => model.companyName)
@Html.EditorFor(model => model.companyName) @Html.ValidationMessageFor(model => model.companyName)
... here other fields ...
@Html.LabelFor(model => model.userFName)
@Html.EditorFor(model => model.userFName) @Html.ValidationMessageFor(model => model.userFName)
... here other fields ...

Comme vous pouvez le constater, j’utilise un seul ProfileModel avec tous les champs définis, un seul “gros” formulaire divisé en 3 tabs (Société, Utilisateur, Adresse). Maintenant, je dois mettre un bouton NEXT au bas du premier onglet, un bouton PREV et NEXT au bas du deuxième onglet, enfin un bouton PREV et SUBMIT au bas du troisième et dernier onglet.

Ma question est de savoir comment implémenter les scripts côté client pour empêcher l’utilisateur de passer à tab2 même si tab1 n’est pas validé (validation partielle). Je n’ai donc besoin de parcourir les tabs que si les précédents sont correctement validés. Une idée?

Vous commenceriez par les concepts de Exécution ardente de la validation côté client ASP.NET MVC 3 discrète, mais vous la modifieriez pour utiliser les prochains clics de bouton.

Plus précisément, il est centré sur l’utilisation de .valid () par rapport au formulaire qui contient des éléments avec les atsortingbuts de validation que j’ai copiés ci-dessous au cas où l’article disparaîtrait jamais.

  

Je sais que c’est une vieille question, mais pour tous ceux qui cherchent des choses similaires. Mais seriez-vous ouvert à repenser le design? D’après votre description, ce dont vous avez vraiment besoin, c’est d’un assistant plutôt que d’tabs. Consultez les assistants JQuery. Vous souhaitez utiliser l’option de validation du plug-in Wizard.

J’avais un lien vers l’assistant JQuery sur certains sites, mais je l’ai supprimé car mon vote a été rejeté car il semble que 5 ans plus tard, le lien était compromis.