Question

我正在使用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>';

有人建议使用依赖规则，但是我不知道如何使用它。给出的示例只是检查我是否选中了单选按钮。问题是我有2个单选按钮，而不仅仅是一个。所以它必须依赖于单选按钮的VALUE。有人能告诉我怎么做吗？

以下是示例代码：

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

Answer 1

经过进一步研究，这似乎符合规则：

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

对我来说困难的部分是所有其他例子都忽略了单选按钮应该用作选择器的事实。即，有多个具有相同名称但具有不同值的单选按钮。使用此方法，您可以根据选中的单选按钮的值设置您的依赖项。适合我，它应该适合你。

使用jQuery.Validate - 需要根据单选按钮选择验证特定的字段组（字段未隐藏）

1 个答案: