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()（省略设置代码，因为我没有更改它;我肯定会将其移到click处理程序之外）：

$('.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属性后重新启用验证。

基于复选框的jQuery验证

1 个答案: