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

问题描述 投票:1回答:2

我必须使用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未经过验证(部分验证)。因此,只有在前一个选项被正确验证后才需要浏览标签。任何的想法?

c# jquery asp.net-mvc-3 validation razor
2个回答
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>

-1
投票

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

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

© www.soinside.com 2019 - 2024. All rights reserved.