带有 3 个选项卡表单的 ASP.Net MVC 3 客户端验证

Question

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

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

我的验证标签在我们的 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" }))
{

    <div id="tabs">
    <ul>
        <li><a href="#tabs-1">Company</a></li>
        <li><a href="#tabs-2">User</a></li>
        <li><a href="#tabs-3">Address</a></li>
    </ul>

        <fieldset>

        <div id="tabs-1"> 

        <div class="editor-label">
            @Html.LabelFor(model => model.companyName)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.companyName)
            @Html.ValidationMessageFor(model => model.companyName)
        </div>
    ... here other fields ...

    </div>
    <div id="tabs-2">

        <div class="editor-label">
            @Html.LabelFor(model => model.userFName)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.userFName)
            @Html.ValidationMessageFor(model => model.userFName)
        </div>
    ... here other fields ...

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

我的问题是如何实现客户端脚本以防止用户跳到 tab2，即使 tab1 没有经过验证（部分验证）。 因此，只有在正确验证前一个选项卡时，我才需要浏览选项卡。 有什么想法吗？

Answer 1

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

具体来说，它围绕使用 .valid() 对包含具有验证属性的元素的表单进行使用，我在下面复制了这些元素，以防文章消失。

<script type="text/javascript">
          $(document).ready(function () {
                    $('input','form').blur(function () {
                              $(this).valid();
                    });
          });
</script>

Answer 2

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

我在某个网站上有一个指向 JQuery Wizard 的链接，但在我被否决时将其删除，因为似乎 5 年后该链接已被盗用。