Jquery Validate

Question

Hi,

I'm using jquery.validate.js on a form which is working as it should except for an area where users can choose between paying by cheque, or credit card. Depending on which option is chosen, a hidden div will show.

By Cheque:

<div class="accordionButton">
 <label for="Cheque"><input onclick="javascript: $('#li_buttons').show('slow');" type="radio" name="payby" id="cheque" value="Cheque"/>Pay by Cheque</label>
</div>

By Credit Card:

<div class="accordionButton">
<label for="Credit Card"><input onclick="javascript: $('#li_buttons').show('slow');" type="radio" name="payby" id="credit" value="Credit Card" />Pay by Credit Card</label>
</div>

I need the credit card validated ONLY if the radio button (id="credit") is clicked. So I added the following inline rules using classes (I've included only some of the code):

<div class="accordionContent"><label class="description" for="card_name">Cardholder's Name </label>
<li><input id="card_name" name="card_name" class="required #credit:checked" type="text" value="" /></li>
<label class="description" for="free_quarter">Credit Card Type</label>
<li><select "id="card_type" name="card_type" class="required #credit:checked"> 
<option value="">Select</option>
<option value="visa">Visa</option>
<option value="mastercard">MasterCard</option>
<option value="am_ex">Am Ex</option>
</select></li>

What's happening tough, is that it's validating even if Cheque has been chosen as payment method, and therefore won't submit without the credit card info being supplied..

What am I doing wrong?

Cheers and many thanks for any help with this.

Answer 1

Try this:

  $("#myform").validate({
     card_type: function(element) {
        return $("#credit:checked").length > 0;
      }
  });

Answer 2

Hi Daniel,

Thanks so much for your input.

I tried the following - removed the inline validation:

$.validator.addMethod("card_type", function(element) {
    return $("#credit:checked").length > 0;
  });

Still isn't validating properly.

Cheers