title: Twitter Bootstrap and jQuery Validation Plugin - use class="control-group error"
body: <p>I've created a form using the Twitter Bootstrap framework and have integrated the jQuery Validation Plugin. I have one form with a series of yes/no questions with radio buttons that I validate to ensure each question is not empty - this is working well.</p>
  
  <p>I would like to leverage the Bootstrap  class="control-group error" to make the error text appear in red so it stands out to the user - currently the "This field is required" text is in black and it's hard to locate.</p>
  
  <p>There's an example of how I would like the error text to appear here:</p>
  
  <p><a href="http://twitter.github.io/bootstrap/base-css.html#forms" rel="nofollow">http://twitter.github.io/bootstrap/base-css.html#forms</a></p>
  
  <p>at the end of this section under "Validation states". Here's the specific example that shows a red message after the input field (I only want the error to appear after they have clicked the Submit button):</p>
  
  <pre><code>&lt;div class="control-group error"&gt;
    &lt;label class="control-label" for="inputError"&gt;Input with error&lt;/label&gt;
    &lt;div class="controls"&gt;
      &lt;input type="text" id="inputError"&gt;
      &lt;span class="help-inline"&gt;Please correct the error&lt;/span&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Here's my form showing one question:</p>
  
  <pre><code>&lt;form class="form-horizontal" method="post" id="inputForm"&gt;
        &lt;input type="hidden" name="recid" value="1"&gt;
  
        &lt;table class="table table-condensed table-hover table-bordered"&gt;
  
        &lt;h2&gt;Input Form&lt;/h2&gt;
  
            &lt;tr&gt;
            &lt;td&gt;Question 1.&lt;/td&gt;
            &lt;td&gt;
                &lt;div class="controls"&gt;
                    &lt;label class="radio inline"&gt;
            &lt;input type="radio" name="q1" value="Yes" required&gt;Yes          &lt;/label&gt;
                    &lt;label class="radio inline"&gt;
            &lt;input type="radio" name="q1" value="No" required&gt;No        &lt;/label&gt;
                    &lt;label for="q1" class="error"&gt;&lt;/label&gt;
          &lt;/div&gt;
            &lt;/td&gt;
            &lt;td&gt;Please answer Yes or No&lt;/td&gt;
            &lt;/tr&gt;
  
        &lt;/table&gt;
         &lt;/div&gt;
  
          &lt;div class="control-group"&gt;
              &lt;div class="controls"&gt;
                &lt;button type="submit" class="btn btn-primary"&gt;Continue&lt;/button&gt;
                &lt;button type="reset" class="btn"&gt;Reset&lt;/button&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
        &lt;/form&gt;
  </code></pre>
  
  <p>I can't work out how to combine the example with my form so that if they submit the form and they haven't answered a question the alert appears in red.</p>
  
  <p>I've setup a jsFiddle <a href="http://jsfiddle.net/fmdataweb/F28PF/" rel="nofollow">here</a> that shows this is action if that helps.</p>