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

Posted 2021-03-31

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

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未经过验证（部分验证）。因此，只有在前一个选项被正确验证后才需要浏览标签。任何的想法？

答案

您将从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>

另一答案

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

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