2012-09-14 3 views
1

양식을 확인하고 제출하려면 jQuery.Validate를 사용하고 있습니다.jQuery.Validate 사용 - 라디오 버튼 선택에 따라 특정 필드 그룹의 유효성을 검사해야 함 (필드가 숨겨져 있지 않음)

이 특정 페이지에서 사용자는 신용 카드 정보 입력 (6 개 필드) 또는 구매 주문 번호 입력 (1 개 필드) 중에서 선택할 수 있습니다.

선택은 라디오 버튼으로 이루어집니다.

<table cellpadding="0" cellspacing="0" align="center" bgcolor="#FFFFFF" width="100%"> 
    <tbody> 
    <tr> 
     <td rowspan="5" width="280" valign="top"><br /></td> 
     <td width="440" colspan="2"><br /> 
     <strong>name</strong> (as it appears on card) *<br /> 
     <input type="text" name="cardName" maxlen="100" onchange="selectRadio(0)" value="" /></td> 
    </tr> 
    <tr> 
     <td colspan="2" width="440"><strong>card type</strong> *<br /> 
     <select name="cardType" onchange="selectRadio(0)"> 
      <option value="MasterCard">MasterCard</option> 
      <option value="VisaCard">Visa</option> 
      <option value="AmExCard">American Express</option> 
     </select></td> 
    </tr> 
    <tr> 
     <td width="440" colspan="2"><strong>card number</strong> (no spaces) *<br /> 
     <input type="text" name="cardNumber" maxlen="25" onchange="selectRadio(0)" value="" /></td> 
    </tr> 
    <tr> 
     <td width="440" colspan="2"><strong>card identification number</strong> (on back of credit card)<br /> 
     <input type="text" name="cardId" maxlen="6" onchange="selectRadio(0)" value="" /></td> 
    </tr> 
    <tr> 
     <td colspan="2" width="440"><strong>expiration date</strong> *<br /> 
     <select name="ExpMon" onchange="selectRadio(0)"> 
      <option value="">&lt;month&gt;</option> 
      <option value="1">01</option> 
      <option value="2">02</option> 
      <option value="3">03</option> 
      <option value="4">04</option> 
      <option value="5">05</option> 
      <option value="6">06</option> 
      <option value="7">07</option> 
      <option value="8">08</option> 
      <option value="9">09</option> 
      <option value="10">10</option> 
      <option value="11">11</option> 
      <option value="12">12</option> 
     </select> 

     <select name="ExpYear"> 
      <option value="" onchange="selectRadio(0)">&lt;year&gt;</option> 
      <option value="2012">2012</option> 
      <option value="2013">2013</option> 
      <option value="2014">2014</option> 
      <option value="2015">2015</option> 
      <option value="2016">2016</option> 
     </select></td> 
    </tr> 
    <tr> 
     <td width="280"> </td> 
     <td colspan="2" width="440"><br /></td> 
    </tr> 
    <tr> 
     <td><input type="radio" name="paymentMode" value="purchaseOrder" /> 
     pay using a purchase order number<br /></td> 
     <td valign="top"><br /> 
     <br /> 
     <br /> 
     <strong>purchase order number</strong> *<br /> 
     <input type="text" name="PONumber" maxlen="40" onchange="selectRadio(1)" /></td> 
    </tr> 
    </tbody> 
</table> 

내 유효성 검사 코드는 다음과 같이 보입니다 : 그러나 내가 있는지 .. 단지 주어진 예제는 확인이를 사용하는 방법을 잘 모르겠습니다,

<script type="text/javascript"> 
    $(document).ready(function(){ 
     $("#frmRegistration2").validate({ 
      debug: false, 
      rules: { 


      }, 
      messages: { 

      }, 
      submitHandler: function(form) { 
       // do other stuff for a valid form 
       $.post(\'/beta4/_action.php\', $("#frmRegistration2").serialize(), function(data) { 
         $(\'.pane2\').slideUp(\'slow\'); 
         $(\'#result2\').html(data); 
         $(\'.pane3\').slideDown(\'slow\'); 

       }); 
      } 
     }); 
    }); 
    </script>'; 

누군가가이 규칙을 따라 사용 제안을 I 라디오 버튼이 선택되어 있는지 확인하십시오. 문제는 하나뿐 아니라 2 개의 라디오 버튼이 있다는 것입니다. 그래서 그것은 라디오 버튼의 VALUE에 의존해야합니다. 누군가 이걸하는 방법을 보여줄 수 있습니까? 나를 위해

rules: { 
PONumber: { 
    required: { 
     depends: function(element) 
        { 
        return $("[name=paymentMode]:checked").val() == "purchaseOrder"; 
        }    
       } 
      }    
     } 

어려운 부분은 다른 모든 예는 무시이었다 :

$("#myForm").validate({ 
    rules: { 
     contact: { 
     required: { 
      depends: function(element) { 
       return $("#myCheckbox:checked"); 
      } 
     } 
     } 
    } 
}) 

답변

0

음 추가 연구에 따라,이 규칙에서 작동하는 것 같다 : 여기

은 예제 코드 라디오 버튼을 셀렉터로 사용해야한다는 사실. 즉, 이름이 같지만 값이 다른 라디오 버튼이 두 개 이상 있습니다. 이 방법을 사용하면 선택한 라디오 버튼의 값에 따라 의존성을 설정할 수 있습니다. 저를 위해 일하십시오, 그것은 당신을 위해 작동해야한다.

관련 문제