Question

我在现有表单上使用jquery验证插件，但它没有在提交时触发。

我在浏览器中没有收到任何javascript错误，但没有发生任何事情，表单正在提交，但不应该提交。

以下是代码：

<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>   
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js></script>
<script type="text/javascript">

$().ready(function () {
    // validate the comment form when it is submitted
    $("#registrationform").validate();

    // validate signup form on keyup and submit
    $("#registrationform").validate({
        rules: {
            fullname: {
                required: true,
                minlength: 2,
                maxlength: 50
            }

        },
        messages: {
            fullname: {
                required: "Please enter a name",
                minlength: "Your name must consist of at least 2 characters",
                maxlength: "Your name must consist of not more than characters"
            }
        }
    });
});
</script>
</head>

<body>
<form id="registrationform" name="registrationform" method="post" action="pageaftervalidation.html">

<table>
<tr>
  <td>Name:</td>
  <td><input id="fullname" name="fullname" type="text"></td>
</tr>
<tr>
<td colspan="2">
    <input type="Submit" value="Submit">
</td>
</tr>
</table>
</form>
</body>
</html>

为什么不提交任何验证提交？

发现问题。

我不能有两个验证功能。从演示中我尝试在提交和密钥上验证表单，但我不需要，因为密钥验证同时进行。

所以为了解决上述问题，我删除了行

$("#registrationform").validate();

Answer 1

它不起作用，因为.validate()的第一个实例优先于任何后续实例。由于第一个实例中没有定义选项，因此初始化插件时没有任何规则或选项，第二个实例完全被忽略。

$("#registrationform").validate();  // <-- delete this line.

$("#registrationform").validate({
    // your rules & options
});

另外，as per jQuery documentation，不建议这样做......

$().ready(function () {

将其更改为更标准的内容......

$(document).ready(function () {

为了提高代码效率，您可以使用the rangelength method代替minlength和maxlength。

minlength: 2,
maxlength: 50

可以更简单地写成......

rangelength: [2,50]

jquery验证插件根本没有触发

1 个答案: