在asp.net mvc3中使用jquery unobtrusive在元素下面显示验证消息

Question

我需要在元素下面显示验证消息。

我尝试添加如下消息：

[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="&amp;lt;br /&amp;gt; UserName is required" data-val="true" class="textfield">

如果我从模型的消息中删除<br/>，验证消息将显示为两行。此外，我已尝试添加如下验证，但验证消息未被覆盖，如下面的验证方法（从“UserName is required”覆盖到“输入用户名”）：

$('#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方法覆盖模型消息吗？

Answer 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>

如你所见，它已经上课field-validation-error。只需添加简单的css即可在新行显示验证消息

.field-validation-error {
    display: block;
}

验证信息将显示在第二行。

如果您希望此展示位置仅应用于特定邮件，则只需将类选择器更改为更具体。

Answer 2

只需在html中添加<br/>。

例如：

@Html.LabelFor(m => m.UserName, "User Name 1")
@Html.TextBoxFor(m => m.UserName)<br />
@Html.ValidationMessageFor(m => m.UserName)