Validation with jQuery based on a checkbox

Question

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 align="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!

Andrew Whitaker · Accepted Answer · 2011-01-14 02:31:37Z

3

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.

answered Jan 14, 2011 at 2:31

Andrew Whitaker

126k32 gold badges296 silver badges308 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Chris Over a year ago

Could I have clarification what this line does? var $inputs = $(".cc input:not(.cc_check):not(:submit)");

Andrew Whitaker Over a year ago

@Chris: Sure: It's getting all inputs underneath the element with class .cc which do not have the class.cc_check or are of type submit

Collectives™ on Stack Overflow

Validation with jQuery based on a checkbox

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related