错误消息在显示时会破坏布局

Question

我的页面上有以下字段

由以下 HTML 构成

<div style="margin-bottom: 10px" class="input-group">
  <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
   @Html.TextBoxFor(m => m.Username, new { @class = "form-control", placeholder = "Choose a username (max 25)", Maxlength = "25", autocomplete = "off" })
</div>

非常基本的东西，我目前在我的应用程序中嵌入了 jquery 表单验证，如下所示：

我已经删除了除此之外的所有字段。

 $('#registrationForm').validate({
    rules: {
        "Username": "required",

    },
    messages: {
        "Username": "Please enter your chosen Username",

    }
});

当我将该字段留空并按提交时，它看起来像这样

如您所见，用户字形图标的高度已增加以适应错误消息。

呈现的 HTML 如下所示：

<div class="input-group" style="margin-bottom: 10px">
 <span class="input-group-addon">
  <i class="glyphicon glyphicon-user"></i>
 </span>
<input id="Username" class="form-control" type="text" value="" placeholder="Choose a username (max 25)" name="Username" data-val-required="The Username field is required." data-val="true" autocomplete="off" maxlength="25">
</div>

谁能说明为什么会发生这种情况？

更新

这是显示错误消息时呈现的内容

<div class="input-group" style="margin-bottom: 10px">
 <span class="input-group-addon">
  <i class="glyphicon glyphicon-user"></i>
 </span>
<input id="Username" class="form-control error" type="text" value="" placeholder="Choose a username (max 25)" name="Username" data-val-required="The Username field is required." data-val="true" autocomplete="off" maxlength="25">
<label class="error" for="Username">Please enter your chosen Username</label>
</div>

** 向 .Error 类添加其他样式后更新 **

Answer 1

执行此操作时会生成一个额外的<span>！我想应该是.error。只需给它一个position: absolute;。

.error {position: absolute; right: 0; width: 100%; bottom: -1em;}

或者只是从.input-group中取出错误文本：

<div style="margin-bottom: 10px" class="input-group">
  <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
</div>
@Html.TextBoxFor(m => m.Username, new { @class = "form-control", placeholder = "Choose a username (max 25)", Maxlength = "25", autocomplete = "off" })

Answer 2

在错误信息中添加如下样式

position : absolute