Form Validation Messages in ASP.NET MVC2 - using images instead of text for error messages

Question

OK - at the moment, to validate my pages I am using [Required] in my model in an MVC2 C# project.

For eg in my model I have:

[DisplayName("Username")]
[Required(ErrorMessage = "Please enter a Username")]
public string UserName { get; set; }

... and in my view I have

<%=Html.ValidationMessageFor(x => x.UserName, "*")%>

But then this isn't consistent with the rest of the styling and error trapping of the rest of our site which was written in Classic ASP.

I want to be able to recreate if possible the validation styles in the images below.

So on loading the page (not on submitting) we might see a display similar to this, with alt and title of the M icon displaying "Please enter a Username":

And then if we try and submit with missing values - we see

Again hovering over the red x will display the error message.

Is there a straightforward way of achieving this styling of validation and if so what is the best way to go about it...

Thank you for any helpful hints, tips, suggestions:

Answer 1

You should beable to achieve this by creating your own HtmlHelper extension method.

E.g.

public static string ValidationImage(this HtmlHelper htmlHelper, string modelName)
{
    if (modelName == null)
    {
        throw new ArgumentNullException("modelName");
    }

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

    ModelState modelState = htmlHelper.ViewData.ModelState[modelName];
    ModelErrorCollection modelErrors = (modelState == null) ? null : modelState.Errors;
    ModelError modelError = ((modelErrors == null) || (modelErrors.Count == 0)) ? null : modelErrors[0];

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

    string messageText = GetUserErrorMessageOrDefault(htmlHelper.ViewContext.HttpContext, modelError, modelState);

    TagBuilder builder = new TagBuilder("img");
    builder.MergeAttribute("src", "urlToYourCrossImage");
    builder.MergeAttribute("class", HtmlHelper.ValidationMessageCssClassName); //Or your own custom class for the img tag here
    builder.MergeAttribute("alt", messageText);
    builder.MergeAttribute("title", messageText);

    return builder.ToString(TagRenderMode.SelfClosing);
}

Have a look at the ASP.NET MVC ValidationExtensions source code to get some ideas about how to write some overloads for it.

HTHs,
Charles