asp.net mvc3で邪魔にならないjqueryを持つ要素の下に検証メッセージを表示

Question

要素の下に検証メッセージを表示する必要があります。

Iは次のようにメッセージを追加しようとしている：

[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"> 

iがモデルのメッセージから<br/>を削除すると、検証メッセージが2行で表示されます。また、私は以下のように検証を追加しようとしているが、検証メッセージは、以下のvalidateメソッドのようにオーバーライドされていない場合（「ユーザ名を入力してください」に「ユーザー名が必要とされる」から上書き）：

$('#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メソッドでオーバーライドするために行う必要がありますか？

<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を持っている：として

Answer 1

検証メッセージのマークアップが生成されます。単純なCSSを追加して、新しい行に検証メッセージを表示してください。

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

そして、2行目の検証メッセージが表示されます。

このプレースメントを特定のメッセージにのみ適用する場合は、クラスセレクタをより具体的に変更してください。

Answer 2

ちょうど<br/>をhtmlに追加してください。

例：

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