Question

我有这样的输入组：

<div class="input-group">
<span class="input-group-addon"><i class="fa fa-user"></i></span>
<input class="form-control" id="username" name="username" placeholder="Username" type="text">
</div>

这就是它的样子：

这是codepen。

我正在使用jQuery验证，它会添加一个带有错误消息的错误类，但这会拉伸前面的图标。

html错误：

<div class="input-group has-error">
<span class="input-group-addon"><i class="fa fa-user"></i></span>
<input class="form-control error" id="username" name="username" type="text">
<span class="help-block form-error">This user name is already registered.</span></div>

这就是它的样子：

如何保持图标高度相同并包含内联错误信息？

Answer 1

您需要在input-group

之外附加错误消息

检查演示HERE

试试这个：

JS：

$(document).ready(function(){
  $('#registration-form').validate({
      rules: {
        name: {
          required: true,
          required: true
        },

        username: {
          minlength: 6,
          required: true
        },
        phone: {
          minlength: 8,
          required: true
        },
        password: {
          required: true,
          minlength: 6
        },
        confirm_password: {
          required: true,
          minlength: 6,
          equalTo: "#password"
        },

        email: {
          required: true,
          email: true
        },

        address: {
          minlength: 10,
          required: true
        },

        agree: "required"

      },
      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);
        }
      },
      success: function(label) {
        label.addClass("valid").text("Ok!")
      }

    });
});

Answer 2

您必须在输入框中进行一些样式设置！试试这个：

<div class="input-group has-error">
<span class="input-group-addon"><i class="fa fa-user"></i></span>
<input class="form-control error" id="username" name="username" type="text" style="height: auto;">
<span class="help-block form-error">This user name is already registered.</span></div>

Bootstrap图标与输入组对齐

2 个答案: