Reputation: 8294
I'm having trouble getting my simple contact form to validate and am not sure what I'm doing wrong, I've stripped the code almost exactly out of a stand alone demo and followed the tut. What's wrong with my code?
In the head: Updated Attempt
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.js"></script>
Initiating, almost right before the closing </head>
<script type="text/javascript">
SubmittingForm=function() {
alert("The form has been validated.");
}
$(document).ready(function() {
$("#fvujq-form1").validate({
submitHandler:function(form) {
SubmittingForm();
},
rules: {
name: "required", // simple rule, converted to {required:true}
email: { // compound rule
required: true,
email: true
},
url: {
url: true
},
comment: {
required: true
}
},
messages: {
comment: "Please enter a comment."
}
});
});
jQuery.validator.addMethod(
"selectNone",
function(value, element) {
if (element.value == "none") {
return false;
}
else return true;
},
"Please select an option."
);
$(document).ready(function() {
$("#fvujq-form2").validate({
submitHandler:function(form) {
SubmittingForm();
},
rules: {
sport: {
selectNone: true
}
}
});
});
</script>
Close to the bottom of page, form markup:
<p style="font-style:italic; font-size:12px; font-weigh: normal; margin-top: -89px; margin-left: 33px;">Contact me written in a different language.</p> <img src="http://www.cameroncashwell.com/imgs/pointing-left.png" style="float: right; margin-right: 140px; margin-top: -89px;">
<div class="form-div">
<form id="fvujq-form1" style="font-size:22px; color:#333;" method="post" action="">
<div class="form-row"><span class="label">Name *</span><input type="text" name="name" /></div>
<div class="form-row"><span class="label">E-Mail *</span><input type="text" name="email" /></div>
<div class="form-row"><span class="label">URL</span><input type="text" name="url" /></div>
<div class="form-row"><span class="label">Your Comment *</span><textarea name="comment"></textarea></div>
<div class="form-row"><input class="submit" type="submit" value="Submit"></div>
</form>
</div>
Also - where would I call my email address for the contact form's contents to be sent?
Upvotes: 2
Views: 865
Reputation: 126082
You have a couple of problems:
Your link to the Validate plugin is broken. Try using one from a CDN (like Microsoft's) instead:
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js"></script>
Decide which version of jQuery you want to use. Right now, you're loading 1.3.2 (a pretty old version) and the latest version (1.7.1). I would stick with the latest version unless you have a specific reason not to. Here it's also smart to use a CDN:
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.min.js"></script>
Make sure the scripts are loaded in the right order (jQuery, then jQuery Validate). If you place validate before jQuery, your validate code will not work:
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js"></script>
Besides those issues, your actual JavaScript looks good.
Upvotes: 2