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

Question

我必须使用asp.net mvc 3 jquery validate建立一个注册表单。 该表单由大约20个字段组成，这些字段由于UI和导航样式而分成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按钮。

我的问题是如何实现客户端脚本，以防止即使tab1未被验证（部分验证），用户也可以跳至tab2。 因此，只有在正确验证前一个选项卡的情况下，我才需要浏览所有选项卡。 任何想法？

Answer 1

您将从“ 急于执行ASP.NET MVC 3非侵入式客户端验证”中的概念开始，但是对其进行修改以在下次单击按钮时使用。

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

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

Answer 2

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

我在某个站点上有一个指向JQuery向导的链接，但由于5年后该链接被盗用而被我否决，因此将其删除。