Question

我在测试页面上使用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的新手。

@Edit

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

Answer 1

在构建DOM之前，您正在编写js。然后浏览器不知道是什么注册。所以你有两个选项，你可以将你的javascript放在标签上方的页面底部或使用window.onLoad函数。这将有效...

Answer 2

而不是$("registerForm")，您应该按ID $("#registerForm")

进行选择

jquery selectors

Answer 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"
                    }
                }
            });
        });

jQuery Validate插件不起作用

3 个答案: