Question

I’m using jQuery.Validate to validate and submit my forms.

On this specific page, the user can select from entering credit card information (6 fields) or entering a Purchase Order number (1 field).

The selection is made by Radio button.

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

My validation code looks something like this:

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

Somebody suggested using the depends rule, however I am not sure how to use this .. The example given just checks to see if I radio button is checked. The problem is I have 2 radio buttons, not just one. So it has to depend on the VALUE of the radio button. Can someone show me how to do this?

Here is the example code:

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

Answer 1

Well upon further study, this seems to work in the rules:

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

The difficult part for me was that all the other examples ignored the fact that radio buttons should be used as selectors. ie, there are more than one radio button with the same name, but with different values. Using this method you can set your depend based on the value of the checked radio button. Works for me, it should work for you.