在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;
}

验证消息将显示在第二行.

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