我有一个带有三个单选按钮的表单。当选择其中一个单选按钮时，我在表单上显示另一个表格。 验证未正确更新。它应该只显示所显示的表的验证。如果未显示付款表，我不想验证字段。
<script type="text/javascript">
$(document).ready(function() {
$('input[name="group1"]').change(function(){
if ($(this).val() == "charge")
{
$('#charge').css('display', 'inline');
}
else
{
$('#charge').css('display', 'none');
}
});
});*/
</script>
<form name="contact_form" method="post" action="">
<table border="0">
<tr>
<td style="width: 100px" >First Name *:</td>
<td colspan="2"><input id="fname" name="fname" type="text" size="30" /></td>
</tr>
<tr>
<td>Select An Option:</td>
<td>
<div >
<!--select id="selection" name="selection" size="1" onchange="display(this,'charge');" style="width: 260px;"/-->
<!-- <input id="selection" name="selection" size="1" style="width: 216px"/>-->
<!-- <option value="" selected="selected"></option> -->
<input id="selection" type="radio" name="group1" value="charge" >Please register me for the event & sign me up for the special-priced demo kit of CDN$269 *Special pricing only available until October 23rd.</option></br>
<input id="selection" type="radio" name="group1" value="Already Own Devices">Please simply register me for the event, as I already own a UCM6100 series IP PBX & Grandstream IP phone and will be brining both of them to the training.</option><br/>
<input id="selection" type="radio" name="group1" value="Purchase Demo Kit On-Site" >Please simply register me for the event, and I will purchase the demo kit on-site, for CDN$309 </option><br/>
<!-- </select> -->
</div>
</td>
</tr>
</table>
<table id="charge" style="display:none;" border="0">
<tr>
<td style="padding-top:1em; padding-bottom:1em;" colspan="2"><strong>Billing Info</strong>(**If you wish to buy the UCM6102 IP PBX Appliance and GXP1405 IP Phone that
you will use during the workshop, submit your credit card information below)
</td>
</tr>
<tr>
<td>Credit Card Type:</td>
<td>
<div>
<select id="cctype" name="cctype" style="width: 216px" size="1">
<option value="" selected="selected"></option>
<option value="visa" >Visa</option>
<option value="master" >Mastercard</option>
<option value="discover" >Discover</option>
<option value="amex" >American Express</option>
</select>
</div>
</td>
</tr>
<tr>
<td>Credit Card Number:</td>
<td colspan="2"><input id="ccnumber" name="ccnumber" type="text" style="width: 211px" size="19" /></td>
</tr>
<tr>
<td>CC Exp Date(MM/YYYY):</td>
<td colspan="2"><input id="ccdate" name="ccdate" type="text" style="width: 211px" size="10" /></td>
</tr>
<tr>
<td>Name as appeared <br/> on Credit Card *:</td>
<td colspan="2"><input id="ccname" name="ccname" type="text" size="30" /></td>
</tr>
<tr>
<td>Billing Address *:</td>
<td colspan="2"><input id="billadd" name="billadd" type="text" size="30" /></td>
</tr>
<tr>
<td>City *:</td>
<td colspan="2"><input id="billcity" name="billcity" type="text" size="30" /></td>
</tr>
<tr>
<td>State *:</td>
<td colspan="2"><input id="billstate" name="billstate" type="text" style="width: 211px" size="12" /></td>
</tr>
<tr>
<td>Zip *:</td>
<td colspan="2"><input id="billzip" name="billzip" type="text" style="width: 211px" size="10" /></td>
</tr>
<tr>
<td style="padding-top:1em" colspan="2">
<input id="Checkbox1" type="checkbox" />By checking this box, Gentek Marketing Inc.
is permitted to charge my credit card CND$299 to cover my registration for the
UCM6100 series IP PBX Workshop at Toronto.<br />
<td>
</tr>
</table>
<table>
<tr>
<td align="left"><input type="reset" name="reset" value="Reset"/></td>
<td style="width: 271px"></td>
<td align="right"><input type="submit" name="Submit" value="Submit" id="btn-submit"></td>
</tr>
</table>
</form>
<?php }
else { ?>
<form name="contact_form" method="post" action="">
<table border="0">
<tr>
<td><br/> </td>
</tr>
<tr>
<td><span class="full">Registration Closed</span></td>
</tr>
</table>
</form>
<?php } ?>
<div id="errors"></div>
<script type="text/javascript">
$('#btn-submit').click(function() {
$('.error').hide();
var hasError = false;
var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
var datePattern = /^((0[1-9])|(1[0-2]))\/((20[1-4][0-9]))$/;
//validate name
if (($("#fname").val() == '') || ($("#lname").val() == '')) {
$("#errors").after('<span class="error">Please enter your full name.</span>');
hasError = true;
}
//validate email
var emailaddressVal = $("#mail").val();
if(emailaddressVal == '') {
$("#errors").after('<span class="error">Please enter your email address.</span>');
hasError = true;
}
else if(!emailReg.test(emailaddressVal)) {
$("#errors").after('<span class="error">Enter a valid email address.</span>');
hasError = true;
}
//validate phone number
if ($("#phone").val() == '') {
$("#errors").after('<span class="error">Please enter your phone number.</span>');
hasError = true;
}
//validate session
if (($("#session").val() == '') || ($("#iama").val() == 'Please Select a Session')) {
$("#errors").after('<span class="error">Please select a session.</span>');
hasError = true;
}
//validate I ama
if ( ($("#iama").val() == '') ) {
$("#errors").after('<span class="error">Please select a type.</span>');
hasError = true;
}
if ( ($("#selection").val() == '') ) {
$("#errors").after('<span class="error">Please select an option.</span>');
hasError = true;
}
if ( ($("#selection").val() == 'charge') ) {
//validate cctype
if ( ($("#cctype").val() == '') ) {
$("#errors").after('<span class="error">Please select a credit card type.</span>');
hasError = true;
}
//validate ccnumber
if ( ($("#ccnumber").val() == '') ) {
$("#errors").after('<span class="error">Please enter a credit card number.</span>');
hasError = true;
}
var emailaddressVal = $("#mail").val();
if(emailaddressVal == '') {
$("#errors").after('<span class="error">Please enter your email address.</span>');
hasError = true;
}
else if(!emailReg.test(emailaddressVal)) {
$("#errors").after('<span class="error">Enter a valid email address.</span>');
hasError = true;
}
//validate ccdate
var ccdate = $("#ccdate").val();
if ( ccdate == '') {
$("#errors").after('<span class="error">Please enter a date</span>');
hasError = true;
}
else if(!datePattern.test(ccdate)) {
$("#errors").after('<span class="error">Enter a valid date.</span>');
hasError = true;
}
//validate ccname
if ( ($("#ccname").val() == '') ) {
$("#errors").after('<span class="error">Please enter a name</span>');
hasError = true;
}
//validate billadd
if ( ($("#billadd").val() == '') ) {
$("#errors").after('<span class="error">Please enter a billing address</span>');
hasError = true;
}
//validate billcity
if ( ($("#billcity").val() == '') ) {
$("#errors").after('<span class="error">Please enter a billing city</span>');
hasError = true;
}
// validate billstate
if ( ($("#billstate").val() == '') ) {
$("#errors").after('<span class="error">Please enter a billing state</span>');
hasError = true;
}
//validate billzip
if ( ($("#billzip").val() == '') ) {
$("#errors").after('<span class="error">Please enter a billing zip</span>');
hasError = true;
}
//validate Checkbox1
if ( $("#Checkbox1").attr('checked') == false ) {
$("#errors").after('<span class="error">You must agree to the terms and conditions.</span>');
hasError = true;
}
if(hasError == true) { return false; }
}
if(hasError == true) { return false; }
});
</script>
我必须将验证更改为：
if ( ($("#selection").attr('checked') == false ) ) {
$("#errors").after('<span class="error">Please select an option.</span>');
hasError = true;
}
if ( ($("#selection").attr('checked') == true ) ) {
//validate cctype
if ( ($("#cctype").val() == '') ) {
$("#errors").after('<span class="error">Please select a credit card type.</span>');
hasError = true;
}
答案 0 :(得分：2)
首先，ID对于控件不应相同。我假设charge是一个控件。
请检查以下代码，它会对您有帮助。
$(document).ready(function() {
$('input[name="group1"]').change(function(){
if ($(this).val() == "charge")
{
$('#charge').css('display', 'inline');
}
else
{
$('#charge').css('display', 'none');
}
});
});
答案 1 :(得分：0)
这里：
$(document).ready(function() {
$('#charge').hide();
}
是的，你不希望所有这些ID都一样。