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>
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/
精彩评论