Question

我有一个带有隐藏div的大表单，初始选择菜单显示相应的div（为简洁起见，这里只减少了一个选项）...当包含div的内容可见时，我想使用validate插件来验证下一步选择菜单。

我使用此规则，适用于初始选择菜单

salesProduct: {
    required: "div#sales:visible"
}

如果提交为空，则此div中的textarea会出错。这是规则：

salesInfo: {
    required: "div#sales:visible"
}

我缺少什么？

非常感谢您对此的任何帮助。

简化代码在这里：

<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 />&nbsp;Yes, I would like to subscribe 
to the e-Newsletter.
</p>   
<input type="submit" name="Submit" value="Submit" />    
</form>     
</body>
</html>

Answer 1

在选择“salesProduct”中更改第一个选项值：

<select name="salesProduct" class="required">
<option selected="">Choose a product...</option>

到

<select name="salesProduct" class="required">
<option value="">Choose a product...</option><!--THIS LINE IS CHANGED //-->

JQuery验证插件：为什么这个选择菜单不验证（）？

1 个答案: