다중 부분 뷰의 유효성 검사 요약을 jquery 탭으로

Question

모델이 여러 부분 뷰 전체에 걸쳐 표시되는 양식이 있습니다. jQuery 탭이 사용되며 유효성 검사 요약은 모든 뷰의 오류를 보지 않습니다.

첫 번째 탭에서 오류가 발생하고 두 번째 탭으로 이동하면 사용 된 마지막 탭의 오류로 인해 유효성 검사 요약이 무시됩니다.

jQuery 탭을 사용하지 않으면 제대로 작동합니다.

어떻게 탭을 사용하고 유효성 검사 요약을 부분보기/탭간에 공유합니까?

홈페이지보기 :

@model Data 

<script type="text/javascript"> 

    $(function() { 
     $("#Tabs").tabs(); 
    }); 
</script> 
<div id="Tabs"> 
    <ul> 
     <li><a href="#tabs-Product">Product</a></li> 
     <li><a href="#tabs-Filteration">Filteration</a></li> 
    </ul> 
    @using (Ajax.BeginForm(MVC.Products.Save(), 
          new AjaxOptions { HttpMethod = FormMethod.Post.ToString()})) 
    { 

     <div id="tabs-Product"> 
      @{ Html.RenderPartial(MVC.Products.Views.tabs._tabs_Product, Model);} 
     </div> 

     <div id="tabs-Filteration"> 
      @{ Html.RenderPartial(MVC.Products.Views.tabs._tabs_Filteration, Model);} 
     </div> 

     @Html.ValidationSummary(false) 

    <input type="submit" value="Ok" /> 
    } 
</div> 

Answer 1

대신 사용 Pure CSS Tabs는 더 자바 스크립트가없고 늘 검증 요약

CSS 참견 :

.tabs { 
    position: relative; 
    min-height: 570px; /* This part sucks */ 
    clear: both; 
    margin: 25px 0; 
} 

.tab { 
    float: left; 
} 

    .tab label { 
     background: #eee; 
     padding: 10px; 
     border: 1px solid #ccc; 
     margin-left: -1px; 
     position: relative; 
     left: 1px; 
    } 

    .tab [type=radio] { 
     display: none; 
    } 

.content { 
    position: absolute; 
    top: 28px; 
    left: 0; 
    background: white; 
    right: 0; 
    bottom: 0; 
    padding: 20px; 
    border: 1px solid #ccc; 
    overflow: hidden; 
} 

    .content > * { 
     opacity: 0; 
     -webkit-transform: translate3d(0, 0, 0); 
     -webkit-transform: translateX(-100%); 
     -moz-transform: translateX(-100%); 
     -ms-transform: translateX(-100%); 
     -o-transform: translateX(-100%); 
     -webkit-transition: all 0.6s ease; 
     -moz-transition: all 0.6s ease; 
     -ms-transition: all 0.6s ease; 
     -o-transition: all 0.6s ease; 
    } 

[type=radio]:checked ~ label { 
    background: white; 
    border-bottom: 1px solid white; 
    z-index: 2; 
} 

    [type=radio]:checked ~ label ~ .content { 
     z-index: 1; 
    } 

     [type=radio]:checked ~ label ~ .content > * { 
      opacity: 1; 
      -webkit-transform: translateX(0); 
      -moz-transform: translateX(0); 
      -ms-transform: translateX(0); 
      -o-transform: translateX(0); 
     } 

보기 :

@using (Ajax.BeginForm(MVC.Products.Save(), 
          new AjaxOptions 
           { 
            HttpMethod = FormMethod.Post.ToString() 
           })) 
{ 
    @Html.HiddenFor(s => s.Id) 

    @Html.ValidationSummary(false) 

    <div class="tabs"> 

     <div class="tab"> 
      <input type="radio" id="tab-1" name="tab-group-1" checked=""> 
      <label for="tab-1">Product</label> 

      <div class="content"> 
       @{ Html.RenderPartial(MVC.WhiteLabelTool.Symbols.Views.tabs._tabs_Product, Model); } 
      </div> 
     </div> 

     <div class="tab"> 
      <input type="radio" id="tab-2" name="tab-group-1"> 
      <label for="tab-2">Filteration</label> 

      <div class="content"> 
       @{ Html.RenderPartial(MVC.WhiteLabelTool.Symbols.Views.tabs._tabs_Filteration, Model);} 
      </div> 
     </div> 


    </div> 
     <input type="submit" value="Ok" /> 
}