How to customize Html.ValidationMessageFor in ASP MVC

Question

Is it possible to customize the Html.ValidationMessageFor method so that it produces different HTML?

I want to do something similar to:

Answer 1

I created ValidationMessageAsStringFor which just returns the error message as string. It is basically a simplified version of ValidationMessageFor:

public static MvcHtmlString ValidationMessageAsStringFor(this HtmlHelper helper, Expression> expression)
{
    var field = ExpressionHelper.GetExpressionText(expression);
    string modelName = helper.ViewContext.ViewData.TemplateInfo.GetFullHtmlFieldName(field);

    if (!helper.ViewData.ModelState.ContainsKey(modelName))
    {
        return null;
    }

    var modelState = helper.ViewData.ModelState[modelName];
    var modelErrors = (modelState == null) ? null : modelState.Errors;
    var modelError = ((modelErrors == null) || (modelErrors.Count == 0)) ? null : modelErrors.FirstOrDefault(m => !String.IsNullOrEmpty(m.ErrorMessage)) ?? modelErrors[0];

    if (modelError == null)
    {
        return null;
    }

    var errorMessage = GetUserErrorMessageOrDefault(helper.ViewContext.HttpContext, modelError, modelState);

    return MvcHtmlString.Create(errorMessage);
}

private static string GetUserErrorMessageOrDefault(HttpContextBase httpContext, ModelError error, ModelState modelState)
{
    if (!string.IsNullOrEmpty(error.ErrorMessage))
    {
        return error.ErrorMessage;
    }

    if (modelState == null)
    {
        return null;
    }

    return modelState.Value?.AttemptedValue;
}

With this in place and after importing the namespace containing the new helper, just create the HTML code you need:

    

    
@Html.ValidationMessageAsStringFor(m => m.FieldName)