Question

我正在尝试使用Font Awesome图标结合标准MVC验证过程来实现表单验证。我已经编写了一个自定义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

这可以通过CSS在某种程度上解决。例如，如果您想要使用fontawesome图标为验证消息添加前缀，则应包含以下CSS：

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

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

Answer 2

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

使用Font Awesome图标渲染ValidationMessageFor

2 个答案: