使用 Font Awesome 图标渲染 ValidationMessageFor答案

【问题标题】：Render ValidationMessageFor with Font Awesome icons使用 Font Awesome 图标渲染 ValidationMessageFor
【发布时间】：2016-04-10 14:38:33
【问题描述】：

我正在尝试结合标准 MVC 验证过程使用 Font 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？我这样做的方式是否正确？

【问题讨论】：

标签： c# asp.net-mvc validation unobtrusive-validation

【解决方案1】：

这在某种程度上可以通过 CSS 解决。例如，如果您想在验证消息前加上一个 fontawesome 图标，您可以包含以下 CSS：

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

所有验证消息都包装在一个带有field-validation-error 类的span 标记中。上面的 CSS 将在验证文本之前附加一个感叹号图标和空格。

【讨论】：

【解决方案2】：

客户端验证消息使用 jQuery.Validate.js 不显眼地显示。您必须定义客户端 jQuery 适配器，该适配器将包含显示字体真棒的逻辑并使用 validate.js 添加。

【讨论】：