I Have a large form with hidden divs, an initial select menu reveals the appropriate div (reduced to just one option here for brevity)... when that containing div is made visible I want to use the validate plugin to validate the next select menu.
I use this rule, which works for the initial select menu
salesProduct: {
required: "div#sales:visible"
}
The textarea within this div errors if empty on submit. it's rule:
salesInfo: {
required: "div#sales:visible"
}
What am i missing?
Many thanks for any help with this.
The reduced code is here:
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript" src="js/jquery.validate.js"></script>
<script type="text/javascript">
var lastDiv = "";
function showDiv(divName) {
// hide last div
if (lastDiv) {
document.getElementById(lastDiv).className = "hiddenDiv";
}
//if value of the box is not nothing and an object with that name exists,
//then change the class
if (divName && document.getElementById(divName)) {
document.getElementById(divName).className = "visibleDiv";
lastDiv = divName;
}
}
</script>
<!-- validate -->
<script type="text/javascript">
//initiate validator on load
$(function() {
// validate contact form on keyup and submit
$("#enquiry").validate({
//set the rules for the field names
rules: {
selectName: {
required: true
},
firstname: {
required: true,
minlength: 2
},
surname: {
required: true
},
company_name: {
required: true
},
email: {
required: true,
email: true
},
salesProduct: {required: "div#sales:visible"},
salesInfo: {required: "div#sales:visible"}
},
//set messages to appear inline
messages: {
selectName: "<br />Please choose a type of enquiry",
firstname: "<br />Please enter your firstname",
surname: "<br />Please enter your surname",
company_name: "<br />Please enter your company name",
email: "<br />Please enter a valid email address",
telephone: "<br />Please enter your telephone number",
salesProduct: "<br />Please choose an option",
salesInfo: "<br />Please add some information"
}
});
});
</script>
<style type="text/css">
label { font-size: 11px; }
.error { color: red;}
.hiddenDiv { display: none; }
.visibleDiv { display: block; }
</style>
</head>
<body>
<form action="javascript: alert('Submitted');" method="post"
name="enquiry" id="enquiry" onsubmit="">
<h4>Enquiry Form</h4>
<label>Type of Enquiry </label><br />
<select name="selectName" onchange="showDiv(this.value);" class="required">
<option value="">Choose type of enquiry...</option>
<option value="sales">Request a sales person to call</option>
</select>
<br />
<div id="sales" class="hiddenDiv">
<!-------------------------------------------------------->
<!-- SALES -->
<!-- product drop-down -->
<h4>Sales</h4>
<label>Product</label><br />
<select name="salesProduct" class="required">
<option selected="">Choose a product...</option>
<option value="option 1">option 1</option>
<option value="option 2">option 2</option>
<option value="option 3">option 3</option>
<option value="option 4">option 4</option>
<option value="option 5">option 5</option>
</select>
<br />
<!-- further info -->
<label>Further information</label><br />
<textarea name="salesInfo" cols="55" rows="5" id="salesInfo"></textarea>
<!-------------------------------------------------------->
</div><!-- END sales -->
<br />
<!-- enter details -->
<label>First Name*</label><br />
<input name="firstname" type="text" id="firstname" size="25" maxlength="65"/>
<br/>
<label>Surname*</label><br />
<input name="surname" type="text" id="surname" size="25" maxlength="65" />
<br />
<label>Job Title</label><br />
<input name="job" type="text" id="job" size="25" maxlength="65" /><br />
<label>Company*</label><br />
<input name="company_name" type="text" id="company_name" size="25" maxlength="65"/>
<br />
<label>Email*</label><br />
<input name="email" type="text" id="email" size="25" maxlength="65" /><br />
</p><input name="eNews" id="eNews" type="checkbox" value="Yes, I would like to
subscribe to the E-Newsletter" checked /> Yes, I would like to subscribe
to the e-Newsletter.
</p>
<input type="submit" name="Submit" value="Submit" />
</form>
</body>
</html>