Question

What’s wrong with my code?

It’s just is not working, and I don’t know why!

<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>

And the 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

Probably because you’re missing the js extension on your reference to jQuery validate:

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

Works fine as posted: http://jsfiddle.net/xxEg9/

Edit: However, I think specifying onfocusout: true is causing a JavaScript error. Specifying true for this setting is superfluous anyway, just remove it:

$(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();
    }*/
});

Updated example: http://jsfiddle.net/J8J7L/