レンダリングValidationMessageForフォント付き驚くばかりのアイコン

Question

標準のMVC検証プロセスと組み合わせて、フォントAwesomeアイコンを使用してフォーム検証を実装しようとしています。私はこれを達成するために、カスタムValidationMessageForヘルパーを書いた：

public static MvcHtmlString FontAwesomeValidationMessageFor<TModel, TProperty>(this HtmlHelper<TModel> helper, Expression<Func<TModel, TProperty>> expression) 
    { 
     var propertyName = ExpressionHelper.GetExpressionText(expression); 
     var name = helper.AttributeEncode(helper.ViewData.TemplateInfo.GetFullHtmlFieldName(propertyName)); 

     var builder = new TagBuilder("span"); 

     var modelName = ExpressionHelper.GetExpressionText(expression); 
     builder.MergeAttribute("data-valmsg-for", modelName); 
     builder.MergeAttribute("data-valmsg-replace", bool.TrueString.ToLowerInvariant()); 

     if (helper.ViewData.ModelState[name] == null || 
      helper.ViewData.ModelState[name].Errors == null || 
      helper.ViewData.ModelState[name].Errors.Count == 0) 
     { 
      return !helper.ViewContext.UnobtrusiveJavaScriptEnabled 
       ? MvcHtmlString.Empty 
       : MvcHtmlString.Create(builder.ToString()); 
     } 

     builder.AddCssClass("text-danger"); 
     builder.InnerHtml = "<i class='fa fa-exclamation'></i>"; 
     builder.MergeAttribute("title", helper.ViewData.ModelState[name].Errors[0].ErrorMessage); 

     return MvcHtmlString.Create(builder.ToString()); 
    } 

これは、このように私の形で呼び出されます。

@Html.FontAwesomeValidationMessageFor(m => m.Email) 

と、デフォルトでは、このHTMLをレンダリング：

<span data-valmsg-for="Email" data-valmsg-replace="true"></span> 

これは、ように見えます私のフォームに適切なスパンをレンダリングします。しかし、クライアント側の検証を有効にするとすぐにヘルパーが呼び出されなくなり、代わりに標準モデルの検証メッセージが表示されます。ヘルパーHTMLをレンダリングするためにクライアント側の検証をどのように取得できますか？私はこれについて正しいことをしていますか？

Answer 1

クライアント側の検証メッセージは、jQuery.Validate.jsを目立たずに使用して表示されます。素晴らしいフォントを表示し、validate.jsで追加するロジックを含むクライアント側のjQueryアダプタを定義する必要があります。

Answer 2

これはCSSである程度解決できます。すべての検証メッセージがfield-validation-errorのクラスを持つspanタグでラップされ

.field-validation-error:before { 
    font-family: FontAwesome; 
    content: "\f06a\00a0"; 
} 

：例えばあなたがfontawesomeのアイコンを使用して検証メッセージを接頭辞にしたい場合は、以下のCSSが含まれます。上記のCSSは、検証テキストの前に感嘆符とスペースを付けます。