고급 JQuery 유효성 검사 : 특정 조건에 대한 유효성 검사 방지

Question

(http://docs.jquery.com/Plugins/Validation/)에 대해 놀라운 JQuery 유효성 검사 플러그인을 사용하는 양식을 만들고 있습니다.

이 양식을 사용하면 기부를하거나 수표 또는 신용 카드로 지불할지 여부를 지정할 수 있습니다. 라디오 버튼을 사용하여 신용 카드 ASP 패널 또는 체크 ASP 패널을 표시합니다.

내 규칙 및 메시지가 모두 작동합니다. 그러나 다른 요소 (신용 카드 패널의 가시성이 '숨김'으로 설정 됨)에 따라 양식의 특정 부분 (신용 카드 패널)의 유효성 검사를 피하는 규칙을 만들고 싶습니다.

나는 당신과 함께 몸을 피우려고하고있다. 나는 관련없는 부분을 대부분 없애 버렸고, 이것에 관한 나의 방법을 보여주는 사람들에게만 남겨 두었다.

내 body_onload의 javascrip 방법 :

<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 메소드 :

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

에게 어떤 도움이 크게 될 것 고맙다! 필요한 당신이 제한되지 않습니다 속성에 대한

Answer 1

검증 플러그인이 허용 참/거짓, 당신은이 규칙에서 수행 할 수 있습니다 또한

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

, 당신은 당신의 다른 구문을 단축 할 수 온로드 당신은 어떤 이유로 제한하지 않는 경우 : 그러나

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

, 그때 바로 그 때를 보여주기 위해 $("#<%=Cheque.ClientID %>").show(); 구문을 사용하여 모든 가능한 깜박임을 방지하기 위해 그들에게 "숨겨진"CSS 스타일을 적용하는 게 좋을 것 무엇이든 당신은 그것을 유발합니다. 어떤 방법을 선택하든 표시 선택기가 작동하고 소리처럼 정확하게 작동합니다.