title: Jquery validation with hidden contents
body: <p>The contents under the hidden div should be validated only when the div is active. But in my case the error message is not working for the case of  "Elephant".
  Code is in <a href="http://jsfiddle.net/2eRsm/" rel="nofollow">http://jsfiddle.net/2eRsm/</a> for more details, thanks in advance</p>
  
  <pre><code>&lt;form&gt;
     Choose your animal 
  &lt;select id="selectMenu"&gt;
      &lt;option&gt;&lt;/option&gt;
      &lt;option value="monkey"&gt;Monkey&lt;/option&gt;
      &lt;option value="elephant"&gt;Elephant&lt;/option&gt;    
  &lt;/select&gt;
  &lt;div class="mon"&gt;Monkey:
      &lt;input type="text" class="required" name="mon"/&gt; 
      &lt;p id="error-msg"&gt;&amp;nbsp;&lt;/p&gt;
      &lt;/div&gt;
  
  &lt;div class="ele"&gt;Elephant:
      &lt;input type="text" class="required" name="ele"/&gt;
       &lt;p id="error-msg"&gt;&amp;nbsp;&lt;/p&gt;
      &lt;/div&gt;
  &lt;button&gt;submit&lt;/button&gt;    
  &lt;/form&gt;
  //js
  $(document).ready(function () {    
         $("#selectMenu").bind("change", function () {
          if ($(this).val() == "monkey") {
              $(".mon").slideDown();
              $(".ele").slideUp();
          }
          else if($(this).val() =="elephant") {
              $(".ele").slideDown();
              $(".mon").slideUp();
          }
      });
  });
  $("button").click( function(){
      $("form").submit();   
  });
  $("form").validate({
      ignore:":hidden",
      rules: {
          name: ["mon", "ele"]
      },
      errorPlacement: function(error, element) {
          error.appendTo( $('#error-msg') )
      },
      invalidHandler: function(form, validator) {
          console.log( "error" );  
      },
      submitHandler: function( form ) {
          console.log( "no error" );
      }
  });
  //css
  input {
      border: 1px solid #666;
      margin: 10px;
      padding: 3px; 
   }
  p{
      display:inline;
      color: red;
  }
  .mon,.ele{
          display: none; 
  }*
  </code></pre>