title: I want jQuery validator to add a class to the form element's parent
body: <p>How do I use <a href="http://docs.jquery.com/Plugins/Validation" rel="nofollow noreferrer">jQuery validator</a> to add/remove a classname (e.g. <code>validate</code>) on the form element's parent <code>&lt;li&gt;</code> so I can style everything related to that element by only setting the one classname?</p>
  
  <p>The markup is</p>
  
  <pre><code>&lt;li class="validate"&gt;
      &lt;label for="product"&gt;Product of interest &lt;abbr title="Required field"&gt;*&lt;/abbr&gt;&lt;/label&gt;
      &lt;input id="product" type="text" name="product" value="" placeholder="e.g. school bench" class="required" minlength="2"&gt;
  
      &lt;!-- Hidden by CSS unless parent has 'validate' class --&gt;
      &lt;label for="product" class="description"&gt;Please name a product.&lt;/label&gt; 
  &lt;/li&gt;
  </code></pre>
  
  <p>and the default jQuery is</p>
  
  <pre><code>$("#commentForm").validate();
  </code></pre>