Validation with jQuery based on a checkbox

So I have a registration system where a user can choose whether they want to pay now with a credit card or later with a check. If they choose to pay now with a credit card then the fields that hold credit card information need to be validated. However, if they choose to pay by check later, then those fields that hold credit card information need to be hidden and thus also turning off the validation for those fields. This is the code for jQuery I understand should work:

    $('.cc_check').click(function(){  


    $('.ccinfo').toggle()

   if($(".ccinfo").is(":visible")){
    $(".cc").validate({
     rules: {
      card_number: { 
       required: true,
       digits: true,
       creditcard: true 
      },
      card_holder:{
       required: true
      },
      card_month: {
       required: true,
       digits: true,
       minlength: 2,
       maxlength: 2,
       min: 1,
       max: 12
      },
      card_year: {
       required: true,
       digits: true,
       minlength: 2,
       maxlength: 2,
       min: 11
      }
     },
     messages: {
      card_number: {
        required: "Please enter a credit card number"
      },
      card_holder:{
       required: "Please enter a credit card holder"
      },
      card_month: {
       required: "Please enter a credit card expiring month",
       min: "That is not a month",
       max: "That is not a month"
      },
      card_year: {
       required: "Please enter a credit card expiring year",
       min: "That year is in the past"       
      }
     }
    });
   }
  });

Here is the corresponding HTML code:

<tr>
    <td ali开发者_如何学Cgn="right">Pay later when you check-in for camp: </td>
    <td align="left"><input type="checkbox" class="cc_check" id="check" name="check" value="check" /></td>
</tr>
<tr class="ccinfo">
    <td align="right">Pay with Credit Card</td>
    <td align="left"> Now instead of Later</td>
</tr>
<tr class="ccinfo">
    <td align="right">Credit Card Number: </td>
    <td align="left"><input type="text" class="cc" id="card_number" name="card_number"/></td>
</tr>
<tr class="ccinfo">
    <td align="right">Card Holder's Name: </td>
    <td align="left"><input type="text" class="cc" id="card_holder" name="card_holder"/></td>
</tr>
<tr class="ccinfo">
    <td align="right">Expiration Date: </td>
    <td align="left">Month:
    <input type="text" id="card_month" class="cc" name="card_month" style="width:30px"/>
    Year:
    <input type="text" id="card_year" class="cc" name="card_year" style="width:30px"/>
    </td>
</tr>

So my question is really is there something that I'm missing? When the user clicks the checkbox with the class the table rows with the ccinfo class disappear. I also checked to make sure the if statement worked and that it would get inside of it when the ccinfo was visible. Can I not validate based on class name, because that is what I am doing trying to validate the individual text boxes with the class name of cc.

Any help would be much appreciated, this is a problem I have been struggling with for a couple of days now!

I would set the disabled attribute on those elements that you want to disable validation on (setting this attribute disables validation). With this in mind, your code becomes much simpler, with just one call to validate() (validate setup code omitted because I did not change it; I would definitely move it outside of the click handler):

$('.cc_check').click(function() {
    var $ccInfo = $(".ccinfo");
    var $inputs = $(".cc input:not(.cc_check):not(:submit)");
    $ccInfo.toggle();
    if ($ccInfo.is(":visible")) {        
        $inputs.removeAttr("disabled");
    }
    else {
        $inputs.attr("disabled", "disabled");
    }
});

See a working example here: http://jsfiddle.net/andrewwhitaker/PMTTK/. Notice that if you check the checkbox, the correct fields are disabled and the form is posted successfully. Validation is re-enabled when the disabled attribute is removed.