Question

I’m currently using ValidationMessageFor to locate and display any errors in my asp.net MVC3 form. To provide this on a client-side level, I’m also using JQuery’s unobtrusive validation.

These methods are fantastic but they seem to be lacking one thing – an option to display an initial ‘hint’ when the user is in a form field, just like on Twitter’s sign up form. To clarify, I’d like this to appear in the same place as the validation message.

Can anyone tell me if this functionality is available and if not, how I would go about implementing it?

Answer 1

Just elaborating on my comment above

The way I implemented this was by creating a “HintFor” html extension

public static MvcHtmlString HintFor<TModel, TValue>(this HtmlHelper<TModel> self, Expression<Func<TModel, TValue>> expression)
{
    dynamic attribute = ModelMetadata.FromLambdaExpression(expression, self.ViewData);
    return MvcHtmlString.Create(attribute.Description);
}

which just displays what you set the description property on the Display attribute for that viewmodel property

[Display(Name = "Application Title", Description = "Description goes in here")]
public string Title { get; set; }

Then in my front end I formatted each form step as shown (the extra classes are because I’m using the uni-form library to format my form)

        <div class="question">
            @Html.LabelFor(m => m.Title, new { @class = "label" })
            <div class="formHint">
                @Html.HintFor(m => m.Title)
            </div>
            <div class="response">
                @Html.TextBoxFor(m => m.Title, new { @class = "textInput", autocomplete = "off" })
            </div>
            <div class="sidetip">
                @Html.ValidationMessageFor(m => m.Title, null, new { @class = "invalid" })
            </div>
        </div>

Then using a little CSS I set the “formhint” class to display none when the error message is shown

.validation-summary-valid, .field-validation-valid
{
    display: none;
}

.input-validation-error + .formHint
{
    display: none !important;
}

Hope this helps