jQuery 验证插件不起作用答案

【问题标题】：jQuery Validate Plugin doesn't workjQuery 验证插件不起作用
【发布时间】：2014-01-12 22:14:27
【问题描述】：

我在测试页面上使用 jQuery 和 jQuery Validate Plugin，我的代码基于 validate demo

<html>
<head>

    <script src="http://jquery.bassistance.de/validate/lib/jquery-1.9.0.js"></script>
    <script type="text/javascript" src="scripts/jquery.validate.js"></script>
    <script type="text/javascript">
        $.validator.setDefaults({
            submitHandler: function() { alert("submited!!!"); }
        });

        $().ready(function() {
            $("#registerForm").validate({
                rules : {
                    username: {
                        required: true,
                        minlength: 2
                    },
                    password: {
                        required: true,
                        minlenght: 5
                    },
                    confirm_password: {
                        required: true,
                        minlenght: 5,
                        equalTo: "#password"
                    },
                    email: {
                        required: true,
                        email: true
                    }
                },
                messages : {
                    username: {
                        required: "Please enter a username",
                        minlenght: "Your username must consist at least 2 characters"
                    },
                    password: {
                        required: "Please enter a password ",
                        minlenght: "Your password must consist at least 5 characters"
                    },
                    confirm_password: {
                        required: "Please repeat the password",
                        minlenght: "Your password must consist at least 5 characters",
                        equalTo: "This password doesn't match with the original password"
                    },
                    email: {
                        required: "Please enter a email",
                        email: "Invalid email"
                    }
                }
            });
        });    


    </script>
    <style type="text/css">
        #commentForm { width: 500px; }
        #commentForm label { width: 250px; }
        #commentForm label.error, #commentForm input.submit { margin-left: 253px; }
        #registerForm { width: 670px; }
        #registerForm label.error {
            margin-left: 10px;
            width: auto;
            display: inline;
            color: red;
        }
        #newsletter_topics label.error {
            display: none;
            margin-left: 103px;
        }
        </style>
</head>
<body class="zoom: 1;">
    <div id="main">
    <form id="registerForm" method="post" action="" novalidate="novalidate">
        <fieldset>
            <legend>OLA MUNDO</legend>
        <p><label for="username">Nome</label>
        <input id="username" name="username" type="text" value=""></p>

        <p><label for="email">E-mail</label>
        <input id="email" name="email" type="email" value=""></p>

        <p><label for="password">Password</label>
        <input id="password" name="password" type="password" value=""></p>

        <p><label for="confirm_password">Confirm Password</label>
        <input id="confirm_password" name="confirm_password" type="password" value=""></p>

        <p><input type="submit" class="submit" value="Enviar"></p>
    </fieldset>
    </form>
    </div>
</fieldset>
</body>

问题是在我的页面中代码不起作用，我不知道为什么会发生。

我的脚本目录中有一个 jquery.js 文件，但该脚本未加载。所以我使用了演示站点中的 jquery，我使用了托管在 google 上的 jquery，但这并没有解决问题。我不知道问题是否出在脚本代码上，因为我是 javascript 的新手。

@编辑

我解决了问题，但现在密码和确认密码字段无效，为什么？ js代码是正确的

【问题讨论】：

如果有任何脚本错误，您是否尝试查看浏览器控制台？
我现在看到了，它说 **Uncaught SyntaxError: Unexpected identifier ** 我解决了！
谢谢大家，问题解决了，Hariprasad 和 nzn 解决了问题
意外的标识符 - 因为您错过了逗号运算符
是的，我解决了这个问题，但现在问题是其他的......

标签： javascript jquery html jquery-plugins jquery-validate

【解决方案1】：

你是在构建 DOM 之前编写你的 js。直到那时浏览器还不知道 register from 是什么。因此，您有两个选择，要么将您的 javascript 放在标签上方的页面底部，要么使用 window.onLoad 函数。这将工作......

【讨论】：

【解决方案2】：

你应该选择$("#registerForm")而不是$("registerForm")

jquery selectors

【讨论】：

我没有看到，谢谢，Hariprasad 所说的解决了我的问题。

【解决方案3】：

您错过了提及选择器 ID $("#registerForm") 并在每个方法中提及 , 操作员的消息

JS：

 $.validator.setDefaults({
            submitHandler: function() { alert("submited!!!"); }
        });

        $().ready(function() {
            $("#registerForm").validate({
                rules : {
                    username: {
                        required: true,
                        minlength: 2
                    },
                    password: {
                        required: true,
                        minlenght: 5
                    },
                    confirm_password: {
                        required: true,
                        minlenght: 5,
                        equalTo: "#password"
                    },
                    email: {
                        required: true,
                        email: true
                    }
                },
                messages : {
                    username: {
                        required: "Please enter a username",
                        minlenght: "Your username must consist at least 2 characters"
                    },   //missed comma
                    password: {
                        required: "Please enter a password ",
                        minlenght: "Your password must consist at least 5 characters"
                    },    //missed comma
                    confirm_password: {
                        required: "Please repeat the password",
                        minlenght: "Your password must consist at least 5 characters",
                        equalTo: "This password doesn't match with the original password"
                    },   //missed comma
                    email: {
                        required: "Please enter a email",
                        email: "Invalid email"
                    }
                }
            });
        });

【讨论】：