troubleshooting Question

jQuery - remove form validation from div when display:none

Avatar of sabecs
sabecs asked on
JavaScript
4 Comments1 Solution1285 ViewsLast Modified:
Hi,
I have a form that has various divs that are hidden depending on payment option selected.
However validation is still executed when divs are hidden, is it possible to use jquery to remove "vlvalidator" & "vllabel" lines from my code inside divs that have a display:none ?

<vllabel for="order_details[eway_CardHoldersName]" errtext="Name Required" validators="CardHoldersNameReq" errclass="vdcopyerr">Name On Card</vllabel>
<vlvalidator name="CardHoldersNameReq" type="required" control="order_details[eway_CardHoldersName]"  errmsg="Please Enter Name on Credit Card">

Thanks in advance for your feedback.

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="ScriptLibrary/jquery-1.4.3.min.js"></script>

</head>


<body>


<script language="javascript" type="text/javascript">         
		window.onload = function() {
			show_payment_option();
		}

function show_payment_option(which_option){ 
		if (typeof which_option == "undefined") {
    	var which_option = "<?php echo $_SESSION['payment_option'] ?>";
  		}
		 if (which_option == 'cheque'){
		   document.getElementById('cheque_option_details').style.display = 'block'; 
		   document.getElementById('direct_option_details').style.display = 'none';
		   document.getElementById('credit_option_details').style.display = 'none'; 
		}else if (which_option == 'direct'){
		   document.getElementById('cheque_option_details').style.display = 'none'; 
		   document.getElementById('direct_option_details').style.display = 'block'; 
		   document.getElementById('credit_option_details').style.display = 'none'; 
		}else if (which_option == 'credit'){
		   document.getElementById('cheque_option_details').style.display = 'none'; 
		   document.getElementById('direct_option_details').style.display = 'none'; 
		   document.getElementById('credit_option_details').style.display = 'block'; 
		} else {
		   document.getElementById('cheque_option_details').style.display = 'none'; 
		   document.getElementById('direct_option_details').style.display = 'none'; 
		   document.getElementById('credit_option_details').style.display = 'none'; 
		}

} 

</script> 
<select name="order_details[payment_option]" class="dropdownmenu" style="width:280px" id="payment_option" onChange="show_payment_option(payment_option.value)">
<option value = "">Select Payment Option</option>
<option value="cheque" <?php if (!(strcmp("cheque", $_SESSION['payment_option']))) echo "SELECTED"; ?>>Cheque - must clear before goods dispatched</option>
<option value="direct" <?php if (!(strcmp("direct", $_SESSION['payment_option']))) echo "SELECTED"; ?>>Direct Deposit into our Bank Account </option>
</select>


<div id="direct_option_details">
<div class="inputname" style="height:140px"><strong>Our Direct Deposit Details</strong>
</div>
<div class="inputfield" style="height:140px">
<strong>Bank: </strong>bank_name</br>
<strong>Account Name: </strong>account_name</br>
<strong>BSB: </strong>bsb</br>
<strong>Account Number: </strong>account_number</br>
</div>
<div class="inputfield_fullwidth" style="height:100px">
You have elected to pay via direct deposit into our account, our details are shown above.Please ensure you specify your <strong>Name</strong> and <strong>Order ID</strong> when making the transfer. Once we confirm your payment has been successful we will arrange for your order to be dispatched. 
</div>
</div><!-- end of deposit_option_details div  !-->

<div  id="cheque_option_details">
<div class="inputname" style="height:140px">
<strong>Details for Cheque Payments</strong>
</div>
<div class="inputfield" style="height:140px">
<strong>business_name</br></strong>
postal_address1</br>
postal_address2</br>
postal_address3</br>
postal_address4</br>
</div>
<div class="inputfield_fullwidth" style="height:100px">
You have elected to pay by cheque, please make cheque payable to business_name and mail to our postal address below.</br>
Once we confirm you payment has been successful we will arrange for your order to be dispatched. <br />
</div>
</div><!-- end of cheque_option_details div  !-->

<div id="credit_option_details">  

<div class="inputname">
<vllabel for="order_details[eway_CardHoldersName]" errtext="Name Required" validators="CardHoldersNameReq" errclass="vdcopyerr">Name On Card</vllabel>
</div><div class="inputfield">
<input name="order_details[eway_CardHoldersName]" type="text" id="eway_CardHoldersName" value="<?php echo $_SESSION['eway_CardHoldersName']; ?>" size="35"/>
<vlvalidator name="CardHoldersNameReq" type="required" control="order_details[eway_CardHoldersName]"  errmsg="Please Enter Name on Credit Card">
</div>

</div>


</body
Join the community to see this answer!
Join our exclusive community to see this answer & millions of others.
Unlock 1 Answer and 4 Comments.
Join the Community
Learn from the best

Network and collaborate with thousands of CTOs, CISOs, and IT Pros rooting for you and your success.

Andrew Hancock - VMware vExpert
See if this solution works for you by signing up for a 7 day free trial.
Unlock 1 Answer and 4 Comments.
Try for 7 days

”The time we save is the biggest benefit of E-E to our team. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange.

-Mike Kapnisakis, Warner Bros