高级JQuery验证：避免对特定条件进行验证

Question

我正在制作一个表单，我使用了令人惊叹的JQuery验证插件（http://docs.jquery.com/Plugins/Validation/）。

此表格允许人们进行捐款并指定他们是否通过支票或信用卡支付。我使用单选按钮来显示信用卡asp面板或检查asp面板。

我的规则和消息都工作。但是，我希望创建一个规则，以避免根据另一个因素（信用卡面板的可见性设置为“隐藏”）验证表单的某些部分（信用卡面板）。

请原谅我即将破坏你的代码 - 我剥去了大部分不相关的部分，只留下那些证明我的方法去解决这个问题的方法。

我body_onload的javascrip方法：

function body_onload() 
{ 
    document.getElementById('<%=Cheque.ClientID %>').style.display = 'none'; 
    document.getElementById('<%=CreditCard.ClientID %>').style.display = 'none'; 
} 

我的单选按钮来选择付款方式：

<div style="width:430px; padding:5px;"><b>Payment Method:</b>&nbsp;&nbsp; 
    <input type="radio" name="PaymentMethod" value="Cheque" onclick="ShowPaymentPanel(this.value)"/>Cheque &nbsp;&nbsp;&nbsp;<input type="radio" name="PaymentMethod" value="CreditCard" onclick="ShowPaymentPanel(this.value)"/>Credit Card</div> 

而且我长的validate方法：

$(document).ready(function(){ 

     jQuery.validator.addMethod("phoneUS", function(phone_number, element) { 
      phone_number = phone_number.replace(/\s+/g, ""); 
      return this.optional(element) || phone_number.length > 9 && 
       phone_number.match(/^(1-?)?(\([2-9]\d{2}\)|[2-9]\d{2})-?[2-9]\d{2}-?\d{4}$/); 
     }, "<br/>&nbsp;&nbsp;&nbsp;&nbsp;Please specify a valid phone number"); 

     // validate form on keyup and submit 
     $("#TransactionForm").validate({ 
      rules: { 
       FirstName: "required", 
       LastName: "required", 
       Phone: { 
        required: true, 
        phoneUS: true 
       }, 
       CCName:{ 
        required: true 
       }, 
       CCNumber:{  
        required: true, 
        creditcard: true 
       }, 
       CCExpiry:{ 
        required: true, 
        digits: true, 
        minlength: 4, 
        maxlength: 4      
       } 
      }, 
      messages: { 
       FirstName: "<br/>&nbsp;&nbsp;&nbsp;&nbsp;Required", 
       LastName: "<br/>&nbsp;&nbsp;&nbsp;&nbsp;Required", 
       Phone: {required: "<br/>&nbsp;&nbsp;&nbsp;&nbsp;Required"}, 
       CCName: "<br/>&nbsp;&nbsp;&nbsp;&nbsp;Please enter the name on the card", 
       CCNumber: { 
        required: "<br/>&nbsp;&nbsp;&nbsp;&nbsp;Please enter the card number", 
        creditcard: "<br/>&nbsp;&nbsp;&nbsp;&nbsp;Please enter a valid card number" 
       }, 
       CCExpiry: { 
        required: "<br/>&nbsp;&nbsp;&nbsp;&nbsp;Please enter the expiry date", 
        minlength: "<br/>&nbsp;&nbsp;&nbsp;&nbsp;Please enter as MMYY", 
        maxlength: "<br/>&nbsp;&nbsp;&nbsp;&nbsp;Please enter as MMYY", 
        digits: "<br/>&nbsp;&nbsp;&nbsp;&nbsp;Date must be numeric" 
       } 
      } 
     }); 
    }); 

任何帮助将是很大的不胜感激！

Answer 1

的验证插件允许这一点，你是不是仅限于一个必要属性真/假，你可以做到这一点在你的规则：

CCNumber:{  
    required: "#<%=CreditCard.ClientID %>:visible", 
    creditcard: "#<%=CreditCard.ClientID %>:visible" 
} 

另外，还可以缩短在你的其他语法onload事件，如果你不局限于某种原因：

$(function() { 
    $("#<%=Cheque.ClientID %>").hide(); 
    $("#<%=CreditCard.ClientID %>").hide(); 
}); 

不过，我建议把一个“隐藏”的CSS样式给他们，以避免任何可能的闪烁，那么就使用$("#<%=Cheque.ClientID %>").show();语法告诉他们什么时候你会触发它。无论你使用什么方法，那么：可见选择器都可以工作，它的行为完全像它听起来一样。