0

我的页面上有以下字段

在此处输入图像描述

它是用以下 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 类添加其他样式后更新 **

在此处输入图像描述

4

2 回答 2

0

<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" })
于 2015-06-12T10:21:57.293 回答
0

将以下样式添加到错误消息中

position : absolute
于 2015-06-12T10:34:44.117 回答