Проверка с помощью jQuery на основе флажка

Question

Таким образом, у меня есть система регистрации, где пользователь может выбрать, хотят ли они сейчас платить кредитной картой или позже чеком. Если они решат оплатить сейчас с помощью кредитной карты, то поля, содержащие информацию о кредитной карте, должны быть проверены. Однако, если они решат оплатить чеком позже, то те поля, которые содержат информацию о кредитной карте, должны быть скрыты и, следовательно, также отключить проверку этих полей. Это код для jQuery, который, как я понимаю, должен работать:

    $('.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"       
      }
     }
    });
   }
  });

Вот соответствующий HTML-код:

<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>

Итак, мой вопрос, действительно ли я что-то упускаю? Когда пользователь нажимает флажок с классом, строки таблицы с классом ccinfo исчезают. Я также проверил, что оператор if работает и что он попадет внутрь него, когда ccinfo будет виден. Могу ли я не проверять на основе имени класса, потому что именно это я делаю, пытаясь проверить отдельные текстовые поля с именем класса cc.

Буду признателен за любую помощь, с этой проблемой я боролся уже пару дней!

Answer 1

Я бы установил атрибут disabled для тех элементов, для которых вы хотите отключить проверку (установка этого атрибута отключает проверку).Имея это в виду, ваш код становится намного проще, всего лишь один вызов validate() (проверка кода установки опущена, поскольку я его не менял; я определенно переместил бы его за пределы обработчика щелчков):

$('.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");
    }
});

См. Рабочий пример здесь: http://jsfiddle.net/andrewwhitaker/PMTTK/. Обратите внимание, что если вы установите флажок, правильные поля будут отключены, и форма будет успешно отправлена.Проверка включается при удалении атрибута disabled.