I’m trying to use jQuery with the Validate plugin, except I cannot get my errors to show up. Below is the code I’m using. I’ve read through the documentation, and can’t tell if it’s because .validate is configured incorrectly, or if it has to do with the fact that my errors are within several divs from the css layout. Thanks in advance for your help.
<script type="text/javascript">
$(document).ready(function() {
$("#order_form").validate({
debug:true,
errorContainer: "#errors",
errorLabelContainer: "#errors ul",
wrapper:"li",
onsubmit:true,
rules: {
business_name: {
required: true
}
},
messages: {
business_name: {
required: "Please enter a valid business name or select "Individual" from above"
}
}
});
});
</script>
</head>
<body>
<div id="wrapper">
<div id="logo">
<img src="images/RPP7.png" />
</div>
<div id="menu">
<ul>
<li class="current_page_item"><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="videos.html">Videos</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>
<div id="content">
<div class="post">
<h2 class="title">Order Now</h2>
<div class="entry">
<font size="-1">Note: This page is viewed correctly with Javascript enabled.</font>
<div id="errors">
<p>One or more things went wrong:</p
<ul></ul>
</div>
<form id="orderForm" method="get" action="">
<label for="t_business"><input type="radio" name="business" value="business" id="t_business" />Business</label>
<label for="t_individual"><input type="radio" name="indiv" value="indiv" id="t_individual" />Individual</label><br />
<div id="business">
<label for="business_name">Business Name: </label><br /><input type="text" name="business_name" /><br />
</div>
<label for="f_name">First Name: *</label><br /><input type="text" id="f_name" /><br />
<label for="l_name">Last Name: *</label><br /><input type="text" id="l_name" /><br /><br />
<label>Preferred Method of Contact: *</label>
<label for="p_phone"><input type="radio" name="contact" id="p_phone" />Phone</label>
<label for="p_email"><input type="radio" name="contact" id="p_email" />E-Mail</label><br />
<div id="contact_phone">
<label for="phone_nr">Phone Number: </label><br /><input type="text" name="phone_nr" /><br />
</div>
<div id="contact_email">
<label for="email_add">E-mail Address: </label><br /><input type="text" name="email_add" /><br />
</div>
<br />
<label>Project Type: </label><br />
<label for="v_school"><input type="radio" name="project" id="v_school" />School Project</label><br />
<label for="v_business"><input type="radio" name="project" id="v_business" />Business Video</label><br />
<label for="v_personal"><input type="radio" name="project" id="v_personal" />Personal Video</label><br />
<label for="v_collection"><input type="radio" name="project" id="v_collection" />Photo Collection</label><br />
<label for="v_other"><input type="radio" name="project" id="v_other" />Other...</label><br />
<div id="v_other_info">
<label>Please Specify: </label><br />
<input type="text" name="v_other_info" />
</div>
<label>Additional Information: </label><br />
<textarea rows="5" cols="30" name="add_info"></textarea><br />
<input class="submit" type="submit" value="Submit" />
</form>
</div>
</div>
</div>
Your selector is wrong.
should be:
In fact, if you open the debugger (Firebug or similar), you’ll see the following message: