title: jquery validator plugin with display:none form elements
body: <p>I'm using the validator plugin found <a href="http://docs.jquery.com/Plugins/Validation">here</a> to validate a form.</p>
  
  <p>Problem I'm having is if I put the following around a form input element the validation fails:</p>
  
  <pre><code>&lt;div style="display:none;"&gt;&lt;input type="text" name="test" /&gt;&lt;/div&gt;
  </code></pre>
  
  <p>I need this because I'm using other UI control layers for the input elements and don't want them visible.</p>
  
  <p>It works on inline and block elements, but I need it to be hidden. Is there anyway to get around this?</p>
  
  <p>Thanks for any feedback</p>
  
  <p><b>Update:</b></p>
  
  <p>I'm mostly validating select option fields, with django (ie: {{form.select_option_element}} )</p>
  
  <p>So effectively:</p>
  
  <pre><code>&lt;div style="display:none;"&gt;
      {{form.select_option_element}}
  &lt;/div&gt;
  </code></pre>
  
  <p>...doesn't work</p>
  
  <p>Right after posting I seem to solve it with:</p>
  
  <pre><code>&lt;div style="visibility: hidden; height: 0;"&gt;
       {{form.select_option_element}}
  &lt;/div&gt;
  </code></pre>
  
  <p>It then allows me to validate the field.</p>