ASP.NET MVC 2検証エラースタイル

Question

ASP.NET MVC 2フォームの検証と自分のスタイルの設定に問題があります。全体でハイライトを表示するには、

<div class="registration-field"> 
    <label>FullName</label><%= Html.TextBoxFor(x => x.FullName) %> 
    <%= Html.ValidationMessageFor(x => x.FullName)%> 
</div>  

問題がある：

フィールドには、次のHTMLを使用しています。ここでは

は、検証エラーと、私のフォームの例ですCSSクラス "registration-field-error"を最初のdivに追加する必要があります。

<div class="registration-field registration-field-error"> 
    <label>FullName</label><%= Html.TextBoxFor(x => x.FullName) %> 
    <%= Html.ValidationMessageFor(x => x.FullName)%> 
</div>  

登録フィールド・エラーのためのCSSは次のとおりです。

.registration-field-error 
{ 
    background-image:url(../Content/Images/box-background-error.png); 
    background-repeat:repeat-y; 
} 

私はではなく、クライアント - のために、サーバーの検証エラーのため正常に動作エラーのViewStateを、チェックするためにいくつかの複雑なロジックを行うことができます

サイドの検証：

<% if (ViewData.ModelState["FullName"] == null) { %> 
    <div class="registration-field"> 
<% } else { %> 
    <div class="registration-field registration-field-error"> 
<% } %> 

私が最初に考えたのは、それが登録フィールド・エラーのクラスを使用する必要があるかどうかを判断するために、新しいHTMLヘルパーを作ることだった。

<%= Html.FormFieldFor(x => x.FullName, ViewData.ModelState) %> 

次に、クライアント側の検証エラーを検出したときにMicrosoftMvc.Ajax.jsスクリプトを編集してクラスを追加します。

これを行うにはより良い方法がありますか？

Answer 1

まず任意の条件付きロジックなしであなたのdiv要素をラップするが、以下のようなクラス名「エラー」とスパンであなたの検証メッセージをラップ：

<div class="registration-field">  
    <label>FullName</label><%= Html.TextBoxFor(x => x.FullName) %>  
    <span class="error"><%= Html.ValidationMessageFor(x => x.FullName)%></span> 
</div> 

、その後、動的エラークラスを追加するには、以下の機能を使用します。

$(function(){ 
$("div span.error").each(function(){ 
    var className = $(this).parent().attr("class") + "-error"; 
    if($(this).html().length > 1) 
    $(this).parent().addClass(className); 
}); 
}); 

これは、コードの一部を変更することになります。