title: Bootstrap 3 Validation
body: <p>I think I almost have Bootstrap validation working but it seems buggy or i'm missing something. When using an input-group how do I make the icon show up in the text field. The other problem is when it errors out and the user fixes it the x icon is still there instead of a checkbox. </p>
  
  <p><a href="http://jsfiddle.net/8RELb/57/" rel="nofollow">JSFiddle</a></p>
  
  <pre><code>$('form').validate({
      rules: {
          field1: {
              minlength: 3,
              maxlength: 15,
              required: true
          },
          field2: {
              minlength: 3,
              maxlength: 15,
              required: true
          }
      },
      highlight: function(element) {
          $(element).closest('.form-group').removeClass('has-success').addClass('has-error')
          $(element).next('span').removeClass('glyphicon-ok').addClass('glyphicon-remove');
      },
      unhighlight: function(element) {
          $(element).closest('.form-group').removeClass('has-error').addClass('has-success')
          $(element).next('span').removeClass('glyphicon-remove').addClass('glyphicon-ok');
      },
      //errorElement: 'span',
      errorClass: 'help-block',
      errorPlacement: function(error, element) {
          if(element.parent('.input-group').length) {
              error.insertAfter(element.parent());
          } else {
              error.insertAfter(element);
          }
      }
  });
  </code></pre>