custom ValidationForMessage helper removing css element

Question

Hi have an html helper that allows me to apply a different style to the ValidationForMessage.

My question is how to I tap into the validation event to either change a css element of the message or trigger some javascript?

My code looks like

 public static MvcHtmlString ValidationStyledMessageFor<TModel, TProperty>(this HtmlHelper<TModel> htmlHelper,Expression<Func<TModel, TProperty>> ex)
    {
        var result = htmlHelper.ValidationMessageFor(ex);
        var res = string.Format("<span class=\"required-field\"></span> <span class=\"error required hidden\"><p>{0}<a class=\"close\" href=\"javascript:closeError();\"></a></p></span>", result.ToHtmlString());
        return MvcHtmlString.Create(res);
    }

As you can see I have a span with a class that is hidden. What I would like to happen is whenever the validation message should be shown I remove the hidden css class.

Any help would be much appreciated.

Darin Dimitrov · Accepted Answer · 2011-03-26 21:52:36Z

1

Here's how you could proceed:

public static MvcHtmlString ValidationStyledMessageFor<TModel, TProperty>(this HtmlHelper<TModel> htmlHelper, Expression<Func<TModel, TProperty>> ex)
{
    var expression = ExpressionHelper.GetExpressionText(ex);
    var modelName = htmlHelper.ViewContext.ViewData.TemplateInfo.GetFullHtmlFieldName(expression);
    var modelState = htmlHelper.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];
    var result = htmlHelper.ValidationMessageFor(ex);

    if (modelError != null)
    {
        // There was an error => remove the hidden class
        return MvcHtmlString.Create(string.Format("<span class=\"required-field\"></span> <span class=\"error required\"><p>{0}<a class=\"close\" href=\"javascript:closeError();\"></a></p></span>", result.ToHtmlString()));
    }
    return MvcHtmlString.Create(string.Format("<span class=\"required-field\"></span> <span class=\"error required hidden\"><p>{0}<a class=\"close\" href=\"javascript:closeError();\"></a></p></span>", result.ToHtmlString()));
}

UPDATE:

If you have client side validation enabled you will also need to plug into the jquery validate plugin and manually indicate how to highlight/unhighlight error fields as you have customized the markup. This can be done by simply overriding the default values of the plugin:

<script type="text/javascript">
    $.validator.setDefaults({
        unhighlight: function (element, errorClass, validClass) {
            $(element).siblings('span.error').addClass('hidden');
        },
        highlight: function (element, errorClass, validClass) {
            $(element).siblings('span.error').removeClass('hidden');
        }
    });
</script>

edited Mar 26, 2011 at 21:52

answered Mar 23, 2011 at 22:18

Darin Dimitrov

1.0m277 gold badges3.3k silver badges3k bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Diver Dan Over a year ago

Hey Darin, I have tried your suggestion and tried debugging to see whats happening but its not working for me, I step through the code and modelState is always null which then causes modelError always to be null. > return MvcHtmlString.Create(string.Format("<span class=\"required-field\"></span is never been hit?

Darin Dimitrov Over a year ago

@Diver Dan, in my test I've used a view model with a single property decorated with the [Required] attribute. Then I put both @Html.EditorFor(x => x.MyProperty) and @Html.ValidationStyledMessageFor(x => x.MyProperty). When the form was first rendered the span had the hidden class but when I submitted it to the POST action by leaving the field empty the validation error was added to the model state and the helper entered the second case and showed the span. What is your test case?

Diver Dan Over a year ago

Yes I am doing the same as you >@Html.LabelFor(model => model.UserName) @Html.EditorFor(model => model.UserName) @Html.ValidationStyledMessageFor(model => model.UserName)</code> for my view and my model looks like >public class RegisterModel { [Required(ErrorMessage = "User Name is required")] [Display(Name = "User name")] public string UserName { get; set; }

Diver Dan Over a year ago

Thanks Darin, sorry I didnt think about mentioning the clientside validation

Darin Dimitrov Over a year ago

@Diver Dan, no problem, it's just that client validation was the culprit here and it took me time to realize this :-)

Collectives™ on Stack Overflow

custom ValidationForMessage helper removing css element

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related