Avatar of sabecs
sabecs
 asked on

jQuery - remove form validation from div when display:none

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

Open in new window

JavaScript

Avatar of undefined
Last Comment
sabecs

8/22/2022 - Mon
cmalakar

$("div").find(":hidden").find("vlvalidator").remove();
$("div").find(":hidden").find("vllabel").remove();
Kiran Sonawane

Try this
<!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';
       document.getElementById('credit_option_details').value = 'XXXXXXXXXXXXXX'; 
    }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'; 
       document.getElementById('credit_option_details').value = 'XXXXXXXXXXXXXX'; 
    }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

Open in new window

ASKER CERTIFIED SOLUTION
leakim971

Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question
sabecs

ASKER
Thanks leakim971, your help is appreciated.
Your help has saved me hundreds of hours of internet surfing.
fblack61