여러 탭의 MVC 폼 유효성 검사 - 유효성 검사 오류가있는 탭으로 자동 점프?

Question

여러 개의 탭이있는 탭 스트립이 있습니다. 각 탭에는 사용자가 입력 할 수있는 여러 텍스트 필드가 있습니다. 탭 스트립은 양식과 제출 버튼 바로 아래에 있습니다.

모델 속성에 대한 주석 처리가 있습니다. 유효성 검사는 Jquery 유효성 검사를 사용하여 올바르게 작동합니다. 그러나 사용자가 입력란에서 입력 오류를 만들고 다른 탭으로 이동 한 다음 submit을 누르면 오류가 비활성 탭에 표시되어 사용자에게 표시되지 않습니다. Jquery 유효성 검사가 자동으로 유효성 검사 오류가있는 탭으로 이동하여 사용자가 볼 수 있도록하고 싶습니다. 이것이 가능한가?

Answer 1

나는 이것을 해결할 수있는 해결책이 없다고 생각합니다. 하지만 당신은 자바 스크립트에서 꽤 쉽게 할 수 있습니다. 당신이 할 일은 양식 제출시 각 탭의 내용을보고, 유효성 검사 오류를 발견하면 해당 탭으로 전환합니다.

<script type="text/javascript"> 
    $(document).ready(function() { 
     $("#myForm").submit(function() { 
      $("#tabs").tabs("select", $("#myForm .input-validation-error").closest(".ui-tabs-panel").get(0).id); 
     }); 
    }); 
</script> 

이 샘플 양식의 ID가 당신의 탭 ID가 탭 것으로, myForm을 있다고 가정 : 여기

는 샘플입니다. 또한 web.config에 ClientValidationEnabled = true 및 UnobtrusiveJavaScriptEnabled = true가 있다고 가정합니다. 이 코드 스 니펫은 오류가있는 첫 번째 탭으로 전환됩니다.

이 코드는 예제이며 리팩토링 수 있지만 아이디어가 있습니다.