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无效 - 您不能将form作为table的孩子。您需要将form 放在 table：

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

Working example

jquery.validate无法正常工作

1 个答案: