두 번째 jQuery 유효성 검사가 부트 스트랩 탭에서 작동하지 않습니다.

Question

내 홈페이지에 두 개의 탭이 있습니다. 하나는 개인 등록 용이고 다른 하나는 회사에 대한 탭입니다. 첫 번째에서는 유효성 검사가 제대로 수행되지만 두 번째 탭에서는 유효성 검사가 작동하지 않고 아무 것도 반환하지 않습니다. 모든

우선, HTML :

<!-- Fire nav tabs --> 
<ul class="nav nav-tabs"> 
    <li class="active"><a href="#pf" data-toggle="tab">Pessoa Fisica</a></li> 
    <li><a href="#pj" id="pjHandler" data-toggle="tab">Pessoa Juridica</a></li> 
</ul> 

<!-- Nav tabs --> 
<div class="tab-content"> 
    <div class="tab-pane fade in active" id="pf"> 
     <form id="pfRegister" action="" method="post" autocomplete="off"> 
      <div class="form-group"> 
       <input type="text" id="firstName" class="form-control inputSk" placeholder="Name" name="firstName" required> 
      </div> 
      <div class="form-group"> 
       <input type="text" id="lastName" class="form-control inputSk" placeholder="Surname" name="lastName" required> 
      </div> 
      <div class="form-group"> 
       <input type="text" id="email" class="form-control inputSk" placeholder="Email" name="email" required> 
      </div> 
      <div class="form-group"> 
       <input type="password" id="password" class="form-control inputSk" placeholder="Password" name="password" required> 
      </div> 
      <div class="form-group"> 
       <input type="password" id="confirm_password" class="form-control inputSk" placeholder="Confirm your password" name="confirm_password" required> 
      </div> 
      <div class="form-group"> 
       <select id="gender" name="gender" class="form-control inputSk" required> 
        <option value="">Gender</option> 
        <option value="Male">Male</option> 
        <option value="Female">Female</option> 
       </select> 
      </div> 
      <div class="form-group"> 
       <div class='input-group date'> 
        <input type='text' class="form-control inputSk input" name="birth" id="birth" required> 
       </div> 
      </div> 

     </div> 
     <div class="actionForm"> 
      <button type="submit" id="send" class="btn btn-default sk skBtn-primary submit">Sign up</button> 
     </div> 
    </form> 
    </div> 

<!-- company register --> 
<div class="tab-pane fade" id="pj"> 
     <form id="pjRegister" class="captcha" action="" method="post" autocomplete="off"> 
      <div class="form-group"> 
       <input type="text" class="form-control inputSk" name="cnpj" id="cnpj" placeholder="CNPJ" required> 
      </div> 
      <div class="form-group"> 
       <input type="text" class="form-control inputSk" name="juridicIdentity" id="razaosocial" placeholder="Razao Social" required> 
      </div> 
      <div class="form-group"> 
       <input type="text" class="form-control inputSk" name="companyIdentity" id="company" placeholder="Company Name" required> 
      </div> 
      <div class="form-group"> 
       <input type="text" class="form-control inputSk" name="administrator" id="administrator" placeholder="Administrator Account" required> 
      </div> 
      <div class="form-group"> 
       <input type="email" class="form-control inputSk" id="pjEmail" name="pjEmail" placeholder="Email" required> 
      </div> 
      <div class="form-group"> 
       <input type="email" class="form-control inputSk" id="pj_confirm_email" name="pj_confirm_email" placeholder="Confirm Email" required> 
      </div> 
      <div class="form-group"> 
       <input type="password" id="pjPassword" class="form-control inputSk pwstrength_viewport_progress" placeholder="Password" required> 
      </div> 
      <div class="form-group"> 
       <input type="password" id="pjConfirm_password" class="form-control inputSk" placeholder="Confirm Password" required> 
      </div> 
      <div class="actionForm"> 
        <button type="button" id="pjSend" class="btn btn-default sk skBtn-primary submit">Sign up</button> 
      </div> 
     </form> 
    </div> 
    </div> <!-- end of pj panel --> 

JS는 :

$("#pfRegister").validate({ 
    rules: {rules}, 
    messages: {msgs} 
}); 

//companies validator 
$("#pjRegister").validate({ 
    rules: {rules}, 
    messages: {msgs} 
}); 

기본값과 showErrors$.validator.setDefaults 안에 설정한다.

내가이와 하나 하나를 확인하려고했지만 여전히 작동하지 : 양식 돈을 '

$("#pjRegister").each(function(){ 
    $(this).validate(); 
}); 

그러나이 방법 :

var pfreg = $("#pfRegister").validate({ 
    rules: {rules}, 
    messages: {msgs} 
}); 

//companies validator 
var pjreg = $("#pjRegister").validate({ 
    rules: {rules}, 
    messages: {msgs} 
}); 

pjreg.element('input'); 
pfreg.element('input'); 

웹 검색, 나는 가능한 해결책을 발견 제출 단추를 클릭하면 t 유효성을 검사합니다.

Answer 1

첫 번째 버튼은 type="submit"이며 유효성 검사 플러그인에 의해 자동으로 캡처되므로 유효성 검사가 트리거됩니다.

두 번째 단추는 이 아니기 때문에이 캡처되었으므로 플러그인을 클릭해도 아무런 변화가 없습니다.

근무 DEMO : http://jsfiddle.net/9o0zd4pt/1/