ASP.Net MVC 3客户端validation，带有3个选项卡表单

我必须使用asp.net mvc 3 jquery validate构建一个注册表单。 由于UI和导航风格，该表单由分成3个JS选项卡的大约20个字段组成。 我通过配置文件模型中的注释在服务器端编写了所有validation：

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

我的validation标签位于我们的Core-> Resources本地化文件中，配置文件控制器被编码为捕获HTTPPOST，我的视图如下所示：

 @model Web.Models.ProfileModel @{ Layout = "~/Views/Shared/_Layout.cshtml"; } @Html.ValidationSummary(true) @using (Html.BeginForm("Register", "Profile", FormMethod.Post, new { id = "RegForm" })) { 
 
 
Company
 
User
 
Address
 
 
 
 
 @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 ... 

如您所见，我使用单个ProfileModel定义了所有字段，单个“大”表单分为3个选项卡（公司，用户，地址）。 现在我必须在第一个选项卡底部放置一个NEXT按钮，在第二个选项卡底部放置一个PREV和NEXT按钮，最后在第三个和最后一个选项卡底部放置一个PREV和SUBMIT按钮。

我的问题是如何实现客户端脚本以防止用户跳过tab2，即使tab1未经过validation（部分validation）。 因此，只有在前一个选项被正确validation后才需要浏览标签。 任何的想法？

Answer 1

您将从Eagerly Performing ASP.NET MVC 3 Unobtrusive Client Side Validation中的概念开始，但修改它以使用您的下一次按钮点击工作。

具体来说，它围绕对表单使用.valid（），该表单包含具有validation属性的元素，如果文章消失，我将在下面复制这些元素。

Answer 2

我知道这是一个老问题，但对于任何可能寻找类似问题的人来说。 但是你愿意重新思考这个设计吗？ 根据您的描述，您真正需要的是向导而不是制表符。 看看JQuery向导。 您想使用向导插件的validation选项。

我在某个网站上有一个指向JQuery Wizard的链接，但在我被投票结果时将其删除，因为5年后链接被泄露了。