Question

jQuery还是一个新手。我正在尝试构建密码更改表单。我希望jQuery验证停止表单提交并显示所需的消息，以便用户可以更正问题。发生的事情是，jQuery会一次显示任何问题的消息，但是当用户没有修复表单上的任何问题时，点击提交第二次表单提交无效数据。希望有人可以告诉我我做错了什么。

提前致谢。

以下是代码：

<table>
    <tr>
        <th>Change Password Form</th>
    </tr>
    <tr>
        <td>
            <form class="cmxform" name="changepasswordform" id="changepasswordform"
                    method="post" action="index.php?action=changepassword">
                Current Password: 
                <input id = "currentpassword" name="currentpassword" type="password"
                        required/><br>
                New Password: 
                <input id = "newpassword" name="newpassword" type="password"
                        required/><br>
                New Password Again: 
                <input id = "newpasswordagain" name="newpasswordagain" type="password"
                        required/> <br>
                <button value="Submit" name="Submit">Submit</button>
                <button type="reset" name="Cancel">Cancel</button>
            </form>
        </td>
    </tr>
</table>
<script>

    $("#changepasswordform").validate({
        rules: {
            currentpassword: {
                required: true
            },
            newpassword: {
                noSpace: true,
                minlength: 3,
                maxlength: 50,
                required: true
            },
            newpasswordagain: {
                equalTo: "#newpassword",
                minlength: 3,
                maxlength: 50,
                noSpace: true,
                required: true
            }
        }
    });

</script>

Answer 1

由于某些未知问题，我不相信jQuery Validate插件可在您的网页上运行。根据浏览器，您很可能只看到默认的HTML5 form validation，因为您还在输入元素中包含了内联HTML5 required属性。

jQuery Validate与您的表单正常工作......

DEMO：http://jsfiddle.net/9vcafnL4/2/

其他潜在问题和说明：

您是否记得在包含jQuery后页面上的某个位置包含jQuery Validate插件？除非包含插件，否则.validate()方法无效。

<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.0/jquery.validate.js"></script>

您正在尝试使用名为noSpace的方法，但不存在jQuery Validate插件的一部分。您必须自己创建此方法或将其删除。

您的提交按钮缺少type="submit"属性。

您不需要HTML5验证属性required以及required中定义的.validate()规则。由于您有其他验证规则，因此可以安全地从输入元素中删除required属性。

无需重新声明第二个密码字段中的所有规则，因为equalTo方法始终确保此值与第一个匹配。

在DOM Ready event handler function中包围jQuery总是一个好主意，以确保在jQuery之前DOM已经准备就绪。

我不知道你为什么用pre tags包围了script代码，但此处不需要pre代码。

修订DEMO：http://jsfiddle.net/9vcafnL4/1/

jQuery验证允许在第二次单击时提交

1 个答案: