title: jQuery Validation with Error Placement
body: <p>I'm currently working on login form and trying to develop the functionality I need it to do when the validation does not pass on the client side.</p>
  
  <p>This is the current HTML I have that is rendered before the login form is validated. I'm wanting to place the error after the div class input-group. It is still placing it after the form-control instead.</p>
  
  <pre><code>&lt;div class="input-group mb15"&gt;
      &lt;span class="input-group-addon"&gt;&lt;i class="glyphicon glyphicon-user"&gt;&lt;/i&gt;&lt;/span&gt;
      &lt;input type="text" class="form-control" placeholder="Email Address" name="email_address"&gt;
  &lt;/div&gt;&lt;!-- input-group --&gt;
  &lt;div class="input-group mb15"&gt;
      &lt;span class="input-group-addon"&gt;&lt;i class="glyphicon glyphicon-lock"&gt;&lt;/i&gt;&lt;/span&gt;
      &lt;input type="password" class="form-control" placeholder="Password" name="password"&gt;
  &lt;/div&gt;&lt;!-- input-group --&gt;
  </code></pre>
  
  <p>jQuery Validation Process</p>
  
  <pre><code>$("#login-form").validate({      
      highlight: function(element) {
          $(element).closest('.input-group').removeClass('has-success').addClass('has-error');
      },
      errorPlacement: function(error, element) {
          error.appendTo(element.parent('.input-group'));
      }      
  });
  </code></pre>