我的页面上有以下字段
它是用以下 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 类添加其他样式后更新 **
