ASP.NET MVC 3 클라이언트 측 유효성 검사 3 탭 양식

Question

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 ... 

내 검증 라벨은 우리의 코어 -> 리소스 지역화 파일에이 프로필 컨트롤러는 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 ... 

당신은 내가 정의 된 모든 필드, 3 개 탭 (회사, 사용자, 주소)를 통해 스플릿 하나의 "큰"양식 단일 ProfileModel을 사용하여 볼 수 있듯이. 이제 첫 번째 탭의 맨 아래에 다음 버튼, 두 번째 탭의 맨 아래에있는 PREV 및 NEXT 버튼, 마지막으로 세 번째 및 마지막 탭의 맨 아래에있는 PREV 및 SUBMIT 버튼을 놓아야합니다.

제 질문은 tab1이 유효성이 검사되지 않더라도 (부분 유효성 검사) 사용자가 tab2로 건너 뛰지 않도록 클라이언트 측 스크립팅을 구현하는 방법입니다. 이전 탭의 유효성을 올바르게 검사 한 경우에만 탭을 검색해야합니다. 아이디어가 있으십니까?

Answer 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> 

Answer 2

나는 이것이 오래된 질문이지만, 비슷한 것을 찾고 있을지도 모른다는 것을 알고있다. 그러나 당신은 디자인을 다시 생각해 볼 수 있습니까? 당신의 설명에서 정말로 필요한 것은 탭이 아니라 마법사입니다. 여기에서 JQuery 마법사를 살펴보십시오 http://thecodemine.org/ 마법사 플러그인의 유효성 검사 옵션을 사용하려고합니다.