如何使用此驗證腳本驗證複選框? 我試過很多不同的方法無濟於事。這是一個驗證腳本,在我修改了我的目的的聯繫表單上,但無法弄清楚如何驗證chekboxes。這是我的表單和驗證代碼。使用Jquery腳本進行復選框驗證
<form id="contactForm" action="send-mail.php" method="post">
<table width="492">
<tr>
<th><label>Title:</label></th>
<td><input name="title" id="title" type="text" class="form-poshytip" title="Enter your first name" /></td>
</tr>
<tr>
<th><label>Name:</label></th>
<td><input name="name" id="name" type="text" class="form-poshytip" title="Enter your first name" /></td>
</tr>
<tr>
<th><label>Email:</label></th>
<td><input name="email" id="email" type="text" class="form-poshytip" title="Enter your email" /></td> </tr>
<tr>
<th><label>Company:</label></th>
<td><input name="company" id="company" type="text" class="form-poshytip" title="Enter your company" /></td>
</tr>
<tr>
<th><label>Phone: (with area code)</label></th>
<td><input name="phone" id="phone" type="text" class="form-poshytip" title="Enter your phone" /></td>
</tr>
<tr>
<th><label>Fax:</label></th>
<td><input name="fax" id="fax" type="text" class="form-poshytip" title="Enter your fax" /></td>
</tr>
<tr>
<th><label>Street:</label></th>
<td><input name="street" id="street" type="text" class="form-poshytip" title="Enter your first name" /></td>
</tr>
<th><label>City:</label></th>
<td><input name="city" id="city" type="text" class="form-poshytip" title="Enter your city" /></td>
</tr>
<th><label>State:</label></th>
<td><input name="state" id="state" type="text" class="form-poshytip" title="Enter your state " /></td>
</tr>
<th><label>Zip:</label></th>
<td><input name="zip" id="zip" type="text" class="form-poshytip" title="Enter your first name" /></td>
</tr>
<tr>
<th colspan="2"><label>Message:</label></th>
</tr>
<tr>
<th></th>
<td><textarea name="comments" id="comments" rows="5" cols="20" class="form-poshytip" title="Enter your comments"></textarea></td>
</tr>
<tr>
<th colspan="2"><label>Please Choose:</label></th>
</tr>
<tr>
<td><p>
<label>
<input style="width:10%;" type="checkbox" name="checkbox[]" value="Initial Free Consultation" id="CheckboxGroup1" class="options"/>
Initial Free Consultation</label>
<br />
<label>
<input style="width:10%;" type="checkbox" name="checkbox[]" value=" Internal or External Audit" id="CheckboxGroup2" class="options"/>
Internal or External Audit</label>
<br />
<label>
<input style="width:10%;" type="checkbox" name="checkbox[]" value="Security/Compliance Consulting" id="CheckboxGroup3" class="options"/>
Security/Compliance Consulting</label>
<br />
<label>
<input style="width:10%;" type="checkbox" name="checkbox[]" value="Risk Assessment" id="CheckboxGroup4" class="options"/>
Risk Assessment</label>
<br />
<label>
<input style="width:10%;" type="checkbox" name="checkbox[]" value="Compliance Readiness" id="CheckboxGroup5" class="options"/>
Compliance Readiness</label>
<br />
</p></td>
<td><p>
<label>
<input style="width:10%;" type="checkbox" name="checkbox[]" value=" Risk Mitigation" id="CheckboxGroup6" class="options"/>
Risk Mitigation</label>
<br />
<label>
<input style="width:10%;" type="checkbox" name="checkbox[]" value="Technical Staffing" id="CheckboxGroup7" class="options" />
Technical Staffing</label>
<br />
<label>
<input style="width:10%;" type="checkbox" name="checkbox[]" value="Pen Testing" id="CheckboxGroup8" class="options"/>
Pen Testing</label>
<br />
<label>
<input style="width:10%;" type="checkbox" name="checkbox[]" value="Compliance Products" id="CheckboxGroup9" class="options"/>
Compliance Products</label>
<br />
<label>
<input style="width:10%;" type="checkbox" name="checkbox[]" value="Other" id="CheckboxGroup10" class="options"/>
Other</label>
<br />
</p></td>
</tr>
<tr>
<td><input style="position:relative; z-index:100;" type="submit" value="Submit" name="submit" id="submit" /></td>
</tr>
</table>
<input type="hidden" value="[email protected]" name="to" id="to" />
<input type="hidden" value="" name="from" id="from" />
<input type="hidden" value="" name="subject" id="subject" />
<input type="hidden" value="" name="sendMailUrl" id="sendMailUrl" />
<p id="error" style="position class="warning">Message</p>
</form>
<p id="success" class="success">Thanks for your comments.</p>
Jquery的
jQuery(document).ready(function($) {
// hide messages
$("#error").hide();
$("#success").hide();
// on submit...
$("#contactForm #submit").click(function() {
$("#error").hide();
//required:
var title = $("input#title").val();
if(title == ""){
$("#error").fadeIn().text("Title required.");
$("input#title").focus();
return false;
}
//name
var name = $("input#name").val();
if(name == ""){
$("#error").fadeIn().text("Name required.");
$("input#name").focus();
return false;
}
//email
var email = $("input#email").val();
if(email == ""){
$("#error").fadeIn().text("Email required.");
$("input#email").focus();
return false;
}
var company = $("input#company").val();
if(company == ""){
$("#error").fadeIn().text("Company required.");
$("input#company").focus();
return false;
}
// phone
var phone = $("input#phone").val();
if(phone == ""){
$("#error").fadeIn().text("Phone required");
$("input#phone").focus();
return false;
}
//fax
var fax = $("input#fax").val();
if(fax == ""){
$("#error").fadeIn().text("Fax required.");
$("input#fax").focus();
return false;
}
var street = $("input#street").val();
if(street == ""){
$("#error").fadeIn().text("Street required.");
$("input#street").focus();
return false;
}
var city = $("input#city").val();
if(city == ""){
$("#error").fadeIn().text("City required.");
$("input#city").focus();
return false;
}
var state = $("input#state").val();
if(state == ""){
$("#error").fadeIn().text("State required.");
$("input#state").focus();
return false;
}
var zip = $("input#zip").val();
if(zip == ""){
$("#error").fadeIn().text("Zip code required.");
$("input#zip").focus();
return false;
}
// comments
var comments = $("#comments").val();
// send mail php
var sendMailUrl = $("#sendMailUrl").val();
//to, from & subject
var to = $("#to").val();
var from = $("#from").val();
var subject = $("#subject").val();
// data string
var dataString = 'title='+ title
+ '&name=' + name
+ '&email=' + email
+ '&company=' + company
+ '&phone=' + phone
+ '&fax=' + fax
+ '&street=' + street
+ '&city=' + city
+ '&state=' + state
+ '&zip=' + zip
+ '&comments=' + comments
+ '&to=' + to
+ '&from=' + from
+ '&subject=' + subject;
// ajax
$.ajax({
type:"POST",
url: sendMailUrl,
data: dataString,
success: success()
});
});
// on success...
function success(){
$("#success").fadeIn();
$("#contactForm").fadeOut();
}
return false;
});
請具體談談您的問題,並考慮製作[jsFiddle](http://jsfiddle.net/),以便我們可以更輕鬆地診斷您的代碼。 – sczizzo 2011-12-28 20:29:22
你究竟需要驗證什麼?如果至少有1個複選框被選中或者有多個被選中?除了使用錯誤的選擇器,你甚至沒有你的'#error'和'#success' div。 – Victor 2011-12-28 20:30:27
我不能爲我的生活弄清楚如何將複選框的驗證添加到上述jQuery表單驗證 – Jakeray 2011-12-28 20:31:49