title: Jquery.Validate Based on Condition
body: <p>I am trying to do conditional validation using Jquery.Validate()</p>
  
  <p>I have a select named selectAmount
  and an inpute named txtAmount</p>
  
  <p>If selectAmount value = "Other"</p>
  
  <p>I'd like for txtAmount to be required.</p>
  
  <pre><code>&lt;div id="container"&gt;
      &lt;form id="AddForm" method="POST" action="#"&gt;
  
                      &lt;select name="selectAmount"&gt;
                          &lt;option value="10"&gt;$10&lt;/option&gt;
                          &lt;option value="25"&gt;$25&lt;/option&gt;
                          &lt;option value="50"&gt;$50&lt;/option&gt;
                          &lt;option value="100"&gt;$100&lt;/option&gt;
                          &lt;option value="250"&gt;$250&lt;/option&gt;
                          &lt;option value="500"&gt;$500&lt;/option&gt;
                          &lt;option value="Other"&gt;Other&lt;/option&gt;
                      &lt;/select&gt;
  
                      &lt;input name="txtAmount" type="text" placeholder="Enter Amount" /&gt;
              &lt;button id="AddToCart"&gt;Add to Cart&lt;/button&gt;
      &lt;/form&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Here's where I'm setting the rules.
  The problem I'm having is here:</p>
  
  <pre><code>"txtAmount": {
                  required: function(element){
                      alert($("#selectAmount").val());
                      return false;
  
  $('#selectAmount').val() //is always undefined
  
  $(document).ready(function () {
    $("#AddForm").validate({
      rules: {
          "selectAmount" : {
              required: true
          },
          "txtAmount": {
              required: function(element){
                  alert($("#selectAmount").val());
                  return $("#selectAmount").val() == 'Other';
              }
          }
      },
      messages: {
  
          "selectAmount": {
              required: "Amount selection is required."
          },
  
          "txtAmount": {
              required: "Amount is required."
          }
      },
      submitHandler: function (form) { // for demo
          return false; // for demo
      }
  });
  </code></pre>
  
  <p>});</p>
  
  <p><a href="http://jsfiddle.net/9YjH2/2/" rel="nofollow">http://jsfiddle.net/9YjH2/2/</a></p>
  
  <p>Can anyone help?</p>