title: Displaying Jquery form validation error messages on the right side of form elements
body: <p>I have a form and I am using this <a href="http://bassistance.de/jquery-plugins/jquery-plugin-validation/" rel="nofollow">jquery Validation Plugin</a> to validate it. The validation is working perfectly but the problem is the error messages show up at the bottom of my form elements. I am trying to display it on the right side of form elements.</p>
  
  <p>Could you please help me?</p>
  
  <p>Please check the entire code on <a href="http://jsfiddle.net/SxFBF/" rel="nofollow">jsfiddle</a></p>
  
  <p>My Form</p>
  
  <pre><code>&lt;form id="commentForm" class="form-horizontal" method="post"&gt;
      &lt;div class="control-group"&gt;
        &lt;label class="control-label" for="input"&gt;Name &lt;span style="color: red;"&gt;*&lt;/span&gt;&lt;/label&gt;
         &lt;div class="controls"&gt;
          &lt;input type="text" name="name" class="input-small required" id="name" value="" /&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="control-group"&gt;
        &lt;label class="control-label" for="input"&gt;Email &lt;span style="color: red;"&gt;*&lt;/span&gt;&lt;/label&gt;
         &lt;div class="controls"&gt;
          &lt;input type="text" name="name" class="input-small required email" id="email" value="" /&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;input type="submit" class="btn" value="submit"  /&gt;
  
  &lt;/form&gt;   
  </code></pre>
  
  <p>CSS for error </p>
  
  <pre><code>form label.error{font:10px Tahoma,sans-serif;color:#ED7476;margin-left:5px}
  form input.error,form input.error:hover,form input.error:focus,form select.error,
  form textarea.error{border:1px solid #ED7476;background:#FFEDED}       
  </code></pre>