2013-07-15 3 views
0

4 개의 탭이있는 양식이 있으며 사용자가 다른 탭을 클릭 할 때 새 탭으로 전환하기 전에 현재 탭의 유효성을 검사 할 수 있기를 원합니다. 이것은 내가 지금까지 무엇을이다.제출하지 않고 탭을 변경할 때 jquery 유효성 확인

$("#tabs").tabs({ 
      beforeActivate: function(event, ui) { 

       var tab = ui.oldTab.index(); 
       var valid = true; 

       if (tab == 0 && ($('#txbYPSchool').val() == "" || $('#txbYPSubjectDesc').val() == "")) { 

        valid = false; 
       }; 


       if (!valid) { 
        //alert('not valid'); 

        event.preventDefault(); 
       } 
       else { 
        alert('valid'); 
       } 
      } 
     }); 

위의 기능이 일부 필드가 채워 있지 않은 경우 다른 탭을 선택에서 사용자를 방지 다음과 같이 나 또한 유효성 검사 기능 설정이 있습니다

$("#form1").validate({ 

      rules: { 

       txbYPSchool: { required: true, nowhitespace: true }, 
       txbYPSubjectDesc: { required: true, nowhitespace: true } 

      }, 

      messages: { 

       txbYPSchool: "*This field is mandatory. If not in school, type 'Not in School'", 
       txbYPSubjectDesc: "*This field is mandatory" 

      }, 

      ignore: "" 
     }); 

현재 탭에 불완전한 필드가 남아있을 때 사용자가 탭을 변경하려고 할 때 유효성 검사를 실행하고 오류 메시지를 표시하려면 어떻게합니까? 사용자가 탭을 변경하려고 할 때만 버튼 클릭없이이 작업을 수행 할 수 있기를 원하지만 유효성 검사 기능을 첫 번째 기능에 통합하는 방법을 모릅니다.

jquery 1.9.1 및 최신 유효성 검사 플러그인을 사용하고 있습니다.

감사

답변

1

당신은 가능성이 사용할 수있는 플러그인의 .valid() method. 플러그인이 유효성을 확인하기 때문에

if !($("#form1").valid()) { 

그런 다음,이 모든 제거 할 수

이 교체 ...이와

if (!valid) { 

...

var valid = true; 
if (tab == 0 && ($('#txbYPSchool').val() == "" || $('#txbYPSubjectDesc').val() == "")) { 
    valid = false; 
}; 
+0

답장을 보내 주셔서 감사합니다. 이것은 내가 찾고 있었던 바로 그 것이다. 도와 주셔서 다시 한번 감사드립니다. :) – spytek