jQuery Validation验证Bootstrap的输入框组(input-group)时提示信息错位的解决办法

当使用jQuery Validation插件验证Bootstrap输入框组的时候，提示的错误信息会导致输入框组错位，具体如图：

解决方法就是通过errorPlacement方法去重新设置错误信息的显示位置，具体代码如下：

$.validator.setDefaults({
  highlight: function(element) {
      $(element).closest('.form-group').addClass('has-error');
  },
  unhighlight: function(element) {
      $(element).closest('.form-group').removeClass('has-error');
  },
  errorElement: 'span',
  errorClass: 'help-block',
  errorPlacement: function(error, element) {
      if(element.parent('.input-group').length) {
          error.insertAfter(element.parent());
      } else {
          error.insertAfter(element);
      }
  }
});

解决后的错误提示截图：