Показать сообщения проверки под элементом с jquery ненавязчивым в asp.net mvc3

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 требуется» для «Введите имя пользователя»):

$('#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?

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

Просто добавьте <br/> в html.

Например:

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