title: Bootstrap with jQuery Validation Plugin
body: <p>I am trying to add validation to my form with jQuery Validation Plugin, but I'm having a problem where the plugin puts the error messages when I'm using input groups.</p>
  
  <p><img src="https://i.stack.imgur.com/DL2hU.png" alt="the problem"></p>
  
  <pre><code>$('form').validate({
      rules: {
          firstname: {
              minlength: 3,
              maxlength: 15,
              required: true
          },
          lastname: {
              minlength: 3,
              maxlength: 15,
              required: true
          }
      },
      highlight: function(element) {
          $(element).closest('.form-group').addClass('has-error');
      },
      unhighlight: function(element) {
          $(element).closest('.form-group').removeClass('has-error');
      }
  });
  </code></pre>
  
  <p><strong>My code:</strong> <a href="http://jsfiddle.net/hTPY7/4/" rel="noreferrer">http://jsfiddle.net/hTPY7/4/</a></p>