高度なJQueryの検証：特定の条件の検証を避ける

Question

私は、（http://docs.jquery.com/Plugins/Validation/）の素晴らしいJQuery検証プラグインを使用しているフォームを作成しています。

このフォームでは、寄付をしたり、小切手やクレジットカードで支払いを行うかどうかを指定することができます。ラジオボタンを使用して、クレジットカードのASPパネルまたはチェックASPパネルのいずれかを表示します。

私のルールとメッセージはすべて機能しています。しかし、別の要素（クレジットカードパネルの表示が「非表示」に設定されている）によっては、フォームの特定の部分（クレジットカードパネル）の検証を避けるルールを作成したいと考えています。

私はあなたに抱きしめようとしているコードを許してください - 私は無関係な部分のほとんどを取り除き、これについて私の方法を示すものだけを残しました。

マイbody_onloadのjavascrip方法：

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

私のラジオボタンのお支払い方法を選択する：すべてのヘルプは非常だろう

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

：

<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メソッドを感謝！

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

また、あなたがあなたの他の構文を短縮することができます。必要なあなたのルールでこれを行うことができ、あなたがfalse/trueに制限されていない属性の

Answer 1

検証プラグインは、これを可能にあなたは、いくつかの理由で制限されていないのonload場合：

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

しかし、私はその後、ちょうどその時何でもそれらを表示する$("#<%=Cheque.ClientID %>").show();構文を使用して、すべての可能なちらつきを避けるために、彼らに「隠された」CSSスタイルを適用することをお勧めしたいですあなたはそれを引き起こす。どのような方法で行っても、可視セレクタは機能しますが、そのように動作します。