jquery.validate funktioniert nicht

Question

Ich habe ähnliche Code auf mehreren anderen Seiten arbeiten. Ich habe so lange auf dieses Video geschaut, dass ich dachte, ich würde um Hilfe bitten ... und ja, ich habe mir alle ähnlichen Fragen und Antworten angeschaut, aber ich vermisse das Problem immer noch. Scheint ziemlich einfach. Wahrscheinlich etwas Dummes.

<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

Das Problem ist, weil Ihr HTML ungültig ist - Sie kein form als Kind eines table haben kann. Sie müssen die formum die table setzen:

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

Working example