0
J'ai un grand formulaire avec des divs cachés, un menu de sélection initial révèle le div approprié (réduit à une seule option ici pour la brièveté) ... quand celui contenant div est rendu visible je veux utiliser le plugin de validation pour valider le prochain sélectionnez le menu.JQuery validate plug in: Pourquoi ce menu de sélection ne validera-t-il pas()?
J'utilise cette règle, qui fonctionne pour le menu de sélection initial
salesProduct: {
required: "div#sales:visible"
}
Le textarea dans ce div erreurs si elle est vide sur soumettre. c'est la règle:
salesInfo: {
required: "div#sales:visible"
}
Que manque-t-il?
Un grand merci pour toute aide avec ceci.
Le code est réduite ici:
<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>