高級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();語法告訴他們什麼時候你會觸發它。無論你使用什麼方法，那麼：可見選擇器都可以工作，它的行爲完全像它聽起來一樣。