jquery.validateが動作しない

Question

他のいくつかのページでも同様のコードが動作しています。私は助けを求めるだろうと思っていたので、このような質問と答えを見てみましたが、まだ問題はありません。かなりシンプルですね。おそらく何かばかげた。

<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が無効であるため、問題がある - あなたはtableの子としてformを持つことができません。あなたはtable周りformを配置する必要があります。

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

Working example