具有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年后該鏈接被盜用而被我否決，因此將其刪除。