how to validate elements within an accordion
Hi,
I have a form that contains options for payment that are toggled using jquery accordion.
The problem I'm having is how to validate (using jquery.validate.js) the fields for the div that contains the Credit Card content when it's selected.
For instance
-
class="creditcard"
would only be required if the radio button with value"credit card" is checked.
I'm pretty new to using jquery so please bear with me if there is an obvious solution.
-
<div id="wrapper">
<div class="accordionButton">
<label><input onclick="javascript: $('#li_buttons').show('slow');" type="radio" name="payby" id="payby" value="Cheque">Pay by Cheque</label>
</div>
<div class="accordionContent"><p>To pay by cheque: submit the form, print it, sign and mail it, along with the cheque, to:<br />See
The Music Directory,<br />Toronto Musicians Association,<br />15 Gervais Drive, Suite 500,<br />
TORONTO ON M3C 1Y8.</p><p>Keep a copy of the form for your records.</p>
</div>
<div class="accordionButton">
<label><input onclick="javascript: $('#li_buttons').show('slow');" type="radio" name="payby" id="payby" value="Credit Card" >Pay by Credit Card</label>
</div>
<div class="accordionContent"><label for="card_name">Cardholder's Name </label>
<li><input id="card_name" name="card_name" type="text" value="" /></li>
<label for="free_quarter">Credit Card Type</label>
<li><select "id="card_type" name="card_type">
<option value="" selected="selected">Select</option>
<option value="visa">Visa</option>
<option value="mastercard" >MasterCard</option>
<option value="american_express" >American Express</option>
</select></li>
<label for="card_number">Card Number </label>
<li><input id="card_number" name="card_number" type="text" class="creditcard" value="" /></li>
<label for="month_expiry">Month of Expiry </label>
<li><select id="month_expiry" name="month_expiry">
<option value="" selected="selected">Select</option>
<option value="January">January</option>
<option value="Februaru">February</option>
<option value="March">March</option>
<option value="April">April</option>
<option value="May">May</option>
<option value="June">June</option>
<option value="July">July</option>
<option value="August">August</option>
<option value="September">September</option>
<option value="October">October</option>
<option value="November">November</option>
<option value="December">December</option>
</select></li>
<label for="year_expiry">Year of Expiry </label>
<li>
<select id="year_expiry" name="year_expiry">
<option value="" selected="selected">Select</option>
<option value="2009">2009</option>
<option value="2010">2010</option>
<option value="2011">2011</option>
<option value="2012" >2012</option>
<option value="2013">2013</option>
<option value="2014">2014</option>
<option value="2015">2015</option>
<option value="2016">2016</option>
<option value="2017">2017</option>
<option value="2018">2018</option>
<option value="2019">2019</option>
<option value="2020">2020</option>
<option value="2021">2021</option>
<option value="2022">2022</option>
<option value="2023">2023</option>
<option value="2024">2024</option>
<option value="2025">2025</option>
<option value="2026">2026</option>
<option value="2027">2027</option>
<option value="2028">2028</option>
<option value="2029">2029</option>
<option value="2030">2030</option>
</select>
</div>
</div>
-