1

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>';

誰かが依存ルールの使用を提案しましたが、これを使用する方法がわかりません..与えられた例は、ラジオボタンがチェックされているかどうかを確認するだけです。問題は、1つだけではなく2つのラジオボタンがあることです。したがって、ラジオボタンの値に依存する必要があります。誰かがこれを行う方法を教えてもらえますか？

サンプルコードは次のとおりです。

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

1 に答える 1

0

さらに研究すると、これはルールで機能するようです。

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

私にとって難しい部分は、他のすべての例がラジオボタンをセレクターとして使用する必要があるという事実を無視していることでした。つまり、同じ名前で値が異なるラジオボタンが複数あります。この方法を使用すると、チェックされたラジオボタンの値に基づいて依存関係を設定できます。私のために働く、それはあなたのために働くはずです。

于 2012-09-17T12:18:55.060 に答える