title: validate hidden form element with jQuery Validation (for use with woocommerce reviews)
body: <p>I want to validate a hidden form with the jQuery Validation plugin to work with woocommerce reviews.</p>
  
  <p>The HTML output is:</p>
  
  <pre><code>&lt;form&gt;
  &lt;!-- then later --&gt;
  &lt;div class="comment-form-rating-wrap"&gt;&lt;p class="comment-form-rating"&gt;&lt;label for="rating"&gt;Overall Rating&lt;/label&gt;&lt;span class="required"&gt;*&lt;/span&gt;&lt;p class="stars"&gt;&lt;span&gt;&lt;a class="star-1" href="#"&gt;1&lt;/a&gt;&lt;a class="star-2" href="#"&gt;2&lt;/a&gt;&lt;a class="star-3" href="#"&gt;3&lt;/a&gt;&lt;a class="star-4" href="#"&gt;4&lt;/a&gt;&lt;a class="star-5" href="#"&gt;5&lt;/a&gt;&lt;/span&gt;&lt;/p&gt;&lt;select style="display: none;" name="rating" id="rating"&gt;
          &lt;option value=""&gt;Rate…&lt;/option&gt;
          &lt;option value="5"&gt;Perfect&lt;/option&gt;
          &lt;option value="4"&gt;Good&lt;/option&gt;
          &lt;option value="3"&gt;Average&lt;/option&gt;
          &lt;option value="2"&gt;Not that bad&lt;/option&gt;
          &lt;option value="1"&gt;Very Poor&lt;/option&gt;
      &lt;/select&gt;&lt;/p&gt;&lt;div class="rating-error"&gt;select a rating&lt;/div&gt;&lt;p&gt;&lt;/p&gt;&lt;/div&gt;
  
  &lt;/form&gt;
  </code></pre>
  
  <p>As you can see there is a form element as above which is hidden, because the form instead displays stars (it's a product review) and it uses this jquery to hide the select element and change to stars:</p>
  
  <pre><code>        jQuery('#rating').hide().before('&lt;p class="stars"&gt;&lt;span&gt;&lt;a class="star-1" href="#"&gt;1&lt;/a&gt;&lt;a class="star-2" href="#"&gt;2&lt;/a&gt;&lt;a class="star-3" href="#"&gt;3&lt;/a&gt;&lt;a class="star-4" href="#"&gt;4&lt;/a&gt;&lt;a class="star-5" href="#"&gt;5&lt;/a&gt;&lt;/span&gt;&lt;/p&gt;');
  
  jQuery('body')
      .on( 'click', '#respond p.stars a', function(){
          var jQuerystar   = jQuery(this);
          var jQueryrating = jQuery(this).closest('#respond').find('#rating');
  
          jQueryrating.val( jQuerystar.text() );
          jQuerystar.siblings('a').removeClass('active');
          jQuerystar.addClass('active');
  
          return false;
      })
      .on( 'click', '#respond #submit', function(){
          var jQueryrating = jQuery(this).closest('#respond').find('#rating');
          var rating  = jQueryrating.val();
  
      });
  </code></pre>
  
  <p>So the question is how do I link this to the jQuery Validation plugin?</p>