jquery.validate가 작동하지 않습니다.

Question

비슷한 코드가 여러 페이지에서 작동합니다. 너무 오래 이걸 보면서 도움을 요청할 것 같았습니다. 그렇습니다. 비슷한 질문과 답변을 모두 보았습니다. 그러나 나는 아직도 그 문제를 놓치고 있습니다. 꽤 단순 해 보입니다. 아마도 멍청한 것 같아. 당신이 table의 자식으로 form을 가질 수 없습니다 -

<div class="section-div"> 
    <h4>Add new member</h4> 
    <table class="tbl-form"> 
     <form id="newMemberForm" action="/clusters/newmember/12/" method="POST">   
      <tr> 
       <th><label for="id_first_name">First name:</label></th> 
       <td><input id="id_first_name" type="text" class="input-xlarge" name="first_name" /></td> 
      </tr> 
      <tr> 
       <th><label for="id_last_name">Last name:</label></th> 
       <td><input id="id_last_name" type="text" class="input-xlarge" name="last_name" /></td> 
      </tr> 
      <tr> 
       <th><label for="id_email">Email:</label></th> 
       <td><input id="id_email" type="text" class="input-xxlarge" name="email" /></td> 
      </tr> 
      <tr> 
       <th><label for="id_permission_role">Role:</label></th> 
       <td> 
        <select name="permission_role" id="id_permission_role"> 
         <option value="owner">Owner</option> 
         <option value="editor">Editor</option> 
        </select> 
       </td> 
      </tr> 
      <tr> 
       <th><label for="id_username">Username:</label></th> 
       <td> 
        <input id="id_username" type="text" name="username" maxlength="30" /><br /> 
        <span class="helptext">Required. 30 characters or fewer. Letters, digits and @/./+/-/_ only.</span> 
       </td> 
      </tr> 
      <tr> 
       <th><label for="id_password1">Password:</label></th> 
       <td><input type="password" name="password1" id="id_password1" /></td> 
      </tr> 
      <tr> 
       <th><label for="id_password2">Password confirmation:</label></th> 
       <td> 
        <input type="password" name="password2" id="id_password2" /><br /> 
        <span class="helptext">Enter the same password as above, for verification.</span> 
       </td> 
      </tr> 
      <tr> 
       <td><input type="submit" name="submit_member" value="Add Member" /></td> 
      </tr> 
     </form> 
    </table> 
</div> 



<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script> 
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js" integrity="sha256-eGE6blurk5sHj+rmkfsGYeKyZx3M4bG+ZlFyA7Kns7E=" crossorigin="anonymous"></script> 

<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.15.0/jquery.validate.js"></script> 
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.15.0/additional-methods.js"></script> 


<script> 
    $(document).ready(function() 
    { 

     $("#newMemberForm").validate({ 
      rules: { 
       'first_name': { 
        required: true 
       }, 
       username: { 
        required: true 
       }, 
       password1: { 
        required: true 
       }, 
       password2: { 
        required: true, 
        equalTo: "#id_password1" 
       }, 
       email: { 
        required: true, 
        email: true 
       } 
      }  

     }); 


    }); 
</script> 

Answer 1

문제는 HTML이 유효하기 때문이다. 당신은 formtable 주위를 둘 필요가 :

<form id="newMemberForm" action="/clusters/newmember/12/" method="POST"> 
    <table class="tbl-form"> 
     <!-- table content... --> 
    </table> 
</form> 

Working example