Проверка ASP.Net MVC 3 на стороне клиента с формой из 3 вкладок

Question

Мне нужно создать регистрационную форму, используя asp.net mvc 3 jquery validate. Эта форма состоит из примерно 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 вкладки (Company, User, Address). Теперь я должен поместить кнопку NEXT внизу первой вкладки, кнопки PREV и NEXT внизу второй вкладки, и, наконец, кнопки PREV и SUBMIT внизу третьей и последней вкладки.

Мой вопрос заключается в том, как реализовать сценарии на стороне клиента, чтобы пользователь не переходил на вкладку tab2, даже если tab1 не проверен (частичная проверка). Поэтому мне нужно просматривать вкладки только в том случае, если предыдущие пункты были правильно проверены. Есть идеи?

Answer 1

Вы начнете с понятий в Стремительно выполняющий ASP.NET MVC 3 Ненавязчивая проверка на стороне клиента , но измените его, чтобы использовать работу при следующих щелчках по кнопке.

В частности, он использует .valid () для формы, которая содержит элементы с атрибутами валидации, которые я скопировал ниже на случай, если статья когда-нибудь исчезнет.

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

Answer 2

Я знаю, что это старый вопрос, но для тех, кто ищет подобное.Но были бы вы готовы переосмыслить дизайн?Из вашего описания, что вам действительно нужно, это мастер, а не вкладки.Посмотрите на мастеров JQuery.Вы хотите использовать опцию проверки плагина Wizard.

У меня была ссылка на JQuery Wizard на каком-то сайте, но я удалил ее, так как мне отказали, так как кажется, что через 5 лет ссылка была взломана.