jQuery Validate Plugin *只是不起作用*？

Question

我的代码出了什么问题？

这只是不起作用，我不知道为什么！

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.validate.min"></script>
<script type="text/javascript">
$(document).ready(function(){
    var userName    = "",
        userEmail   = "",
        roomPass    = "",
        betaCode    = "",
        roomNumber  = "";

    alert("Test!");
    $("#box_create_room").validate({
        submitHandler: function() { alert("Submitted!"); },
        onfocusout: true,
        rules: {
            box_create_user: {
                required:true,
                minlength: 2
            },
            box_create_email: "required",
            box_create_pass: {
                required:true,
                minlength: 4
            }
        },
        messages: {
            box_create_user: {
                required: "Please enter your name.",
                minlength: "Please enter a name of at least 2 characters."
            },
            box_create_email: "Please enter a valid email",
            box_create_pass: {
                required: "A password for the conference room is required.",
                minlength: "The password must be at least 4 digits."
            }
        }
    });

    /*function createRoom() {

        userName = $("#box_create_user").val();
        userEmail = $("#box_create_email").val();
        roomPin = $("#box_create_pass").val();
    }*/
});
</script>

HTML：

<form id="box_create_room" method="get" action="">
                <hr class="line" /><hr class="line_emboss" />
                <input type="text" class="box_element" id="box_create_user" name="box_create_user" placeholder="What's your name?" />
                <hr class="line" /><hr class="line_emboss" />
                <input type="email" class="box_element" id="box_create_email" name="box_create_email" placeholder="What's your email?" />
                <hr class="line" /><hr class="line_emboss" />
                <input type="password" class="box_element" id="box_create_pass" name="box_create_pass" placeholder="Choose a Room Pin (4-8 numbers)" maxlength="8" />
                <hr class="line" /><hr class="line_emboss" />
                <input type="submit" class="box_element" id="box_create_submit" value="Create Room" />
            </form>

Answer 1

可能是因为你错过了对jQuery验证引用的js扩展名：

<script type="text/javascript" src="js/jquery.validate.min.js"></script>

正常发布：http://jsfiddle.net/xxEg9/

编辑： 然而，我认为指定onfocusout: true会导致JavaScript错误。无论如何，为此设置指定true是多余的，只需删除它：

$(document).ready(function(){
    var userName    = "",
        userEmail   = "",
        roomPass    = "",
        betaCode    = "",
        roomNumber  = "";

    $("#box_create_room").validate({
        submitHandler: function() { alert("Submitted!"); },
        rules: {
            box_create_user: {
                required:true,
                minlength: 2
            },
            box_create_email: "required",
            box_create_pass: {
                required:true,
                minlength: 4
            }
        },
        messages: {
            box_create_user: {
                required: "Please enter your name.",
                minlength: "Please enter a name of at least 2 characters."
            },
            box_create_email: "Please enter a valid email",
            box_create_pass: {
                required: "A password for the conference room is required.",
                minlength: "The password must be at least 4 digits."
            }
        }
    });

    /*function createRoom() {

        userName = $("#box_create_user").val();
        userEmail = $("#box_create_email").val();
        roomPin = $("#box_create_pass").val();
    }*/
});

更新示例： http://jsfiddle.net/J8J7L/