提问人：Prasad 提问时间：3/2/2012 最后编辑：Darius KucinskasPrasad 更新时间：3/8/2015 访问量：16185
在 asp.net mvc3 中使用 jquery 不显眼地在元素下方显示验证消息
Show validation messages below the element with jquery unobtrusive in asp.net mvc3
问：
我需要在元素下方显示验证消息。
我尝试添加如下消息：
[Required(ErrorMessage = "<br /> UserName is required")]
public string UserName { get; set; }
但是上述必需的消息呈现为（其中验证消息被编码）：
<input type="text" value="" tabindex="1" style="height:auto; width:280px;" size="40" name="UserName" maxlength="15" id="UserName" data-val-required="&lt;br /&gt; UserName is required" data-val="true" class="textfield">
如果我从模型的消息中删除，验证消息会显示在两行中。我也尝试添加如下验证，但验证消息不会像下面的验证方法那样被覆盖（从“用户名是必需的”覆盖到“输入用户名”）：<br/>
$('#userSignInform').validate({
rules:
{
UserName: { required: true },
Password: { required: true }
},
messages:
{
UserName: { required: "Enter Username" },
Password: { required: "Enter the Password" }
},
errorPlacement: function (error, element)
{
error.appendTo(element.parent("td").next("td"));
}
});
需要采取哪些解决方法才能在元素下方显示验证消息并使用jquery validate方法覆盖模型消息？
答：
10赞
archil
3/2/2012
#1
验证消息标记的生成方式为：
<span class="field-validation-error" data-valmsg-for="UserName" data-valmsg-replace="true">
<span for="UserName" generated="true" class="">UserName is required</span>
</span>
如您所见，它有类.只需添加简单的 css 即可在新行上显示验证消息field-validation-error
.field-validation-error {
display: block;
}
验证消息将显示在第二行。
如果您希望此位置仅应用于特定消息，只需将类选择器更改为更具体即可。
评论
1赞
Prasad
3/2/2012
archil，消息完美地显示在元素下方。关于如何使用jquery validate方法更改验证消息的任何解决方法？
0赞
archil
3/2/2012
$（'#UserName'）.rules（“添加”， { messages： { required： “必需输入”， } }）;这记录在 docs.jquery.com/Plugins/Validation/rules#overview
0赞
Prasad
3/2/2012
archil，非常适合自定义错误消息。我们可以自定义 validate 方法以在新行中显示而不是 css fix 吗？
0赞
archil
3/2/2012
如上所述，您应该像现在一样使用 errorPlacement。
0赞
Prasad
3/2/2012
我已经尝试过了，当我启用不显眼的验证时，它不起作用。
0赞
Satya
3/8/2015
#2
只需添加 html。<br/>
例如：
@Html.LabelFor(m => m.UserName, "User Name 1")
@Html.TextBoxFor(m => m.UserName)<br />
@Html.ValidationMessageFor(m => m.UserName)
评论