Render ValidationMessageFor mit Font Awesome Symbole

Question

Ich versuche die Formularüberprüfung mit Font Awesome-Icons in Kombination mit dem Standard-MVC-Validierungsprozess zu implementieren. also in meiner Form genannt

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()); 
    } 

Dies wird: Ich habe einen benutzerdefinierten ValidationMessageFor Helfer dies zu erreichen geschrieben

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

und mache diese HTML standardmäßig:

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

Dies scheint darauf hinzu arbeiten gut und macht die passenden Spannen auf meiner Form. Sobald ich jedoch die clientseitige Validierung aktiviere, wird mein Helfer nicht mehr aufgerufen, stattdessen wird die Standardmodellüberprüfungsmeldung angezeigt. Wie kann ich die clientseitige Validierung erhalten, um meinen HTML-Helfer zu rendern? Gehe ich das richtig?

Answer 1

Clientseitige Validierungsnachrichten werden mit jQuery.Validate.js unauffällig angezeigt. Sie müssen den clientseitigen jQuery-Adapter definieren, der die Logik enthält, um die Schriftart super anzuzeigen und mit validate.js hinzuzufügen.

Answer 2

Dies könnte in gewissem Umfang mit CSS gelöst werden. Wenn Sie zum Beispiel mögen Sie Ihre Prüfungsmeldungen mit einem fontawesome Symbol Präfix würden Sie das folgende CSS gehören:

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

Alle Prüfungsmeldungen mit einer Klasse von field-validation-error in einem span-Tag eingewickelt werden. Das obige CSS fügt ein Ausrufezeichen und Leerzeichen vor dem Validierungstext ein.