使用带有 Jquery Validate 的 input-group-addon 包装错误标签的 Bootstrap 3 表单答案

【问题标题】：Bootstrap 3 form using input-group-addon wrapping error labels with Jquery Validate使用带有 Jquery Validate 的 input-group-addon 包装错误标签的 Bootstrap 3 表单
【发布时间】：2014-02-17 22:54:52
【问题描述】：

使用带有 Jquery-Validate 的 form-group 和 input-group 标签使用带有 form-horizontal 的 Bootstrap 3。当 Jquery.Validate 运行错误时，它会在输入组中附加一个标签错误控件。

问题在于，当 Jquery Validate 添加标签错误控件时，input-group-addon 会换行到表单字段下方的下一行。

查看： http://www.bootply.com/114554

如何让标签错误留在表单控件下，并且不将 input-group-addon 包装到下一行？

是的，我知道这个解决方案 - 效果很好，但仍然没有为 form-horizontal 排列错误标签： Bootstrap 3 with jQuery Validation Plugin

【问题讨论】：

你能不能只使用这个建议，然后在错误类中添加一个偏移类？例如 errorClass: 'help-block col-md-offset-2',

标签： jquery jquery-validate twitter-bootstrap-3

【解决方案1】：

用另一种方式解决它： http://www.bootply.com/2liEuyqrAb

必须将标签移出输入组。一旦这样做，就会出现预期的行为：向左表单标签，向右字段，并在字段下方出错。

【讨论】：

由于错误标签是jQuery Validate插件动态添加的，所以这个解决方案没有帮助。

【解决方案2】：

解决问题的最简单方法应该是将带有绝对位置属性的错误标签放在 css 中。在您的示例中，结果如下：

.text-danger {
    color: #a94442;
    position: absolute;
    width: 100%;
    top: 34px;
    line-height: 34px;
    left: 0px;


}

【讨论】：

【解决方案3】：

我为另一个用户提供了这个问题的解决方案，同样的问题。

你可以在这里找到它。 Bootstrap-3: Input Group-Addon STRETCHES with jQuery Validation messages.

【讨论】：

【解决方案4】：

input-group 插入问题，尝试 css 修复或以下代码。

  $('.your-form').validate({
    errorPlacement: function ( error, element ) {
      if(element.parent().hasClass('input-group')){
        error.insertAfter( element.parent() );
      }else{
        error.insertAfter( element );
      }
    }
  });

【讨论】：