MVC 3 override validation message css

Question

I am trying to override the default validation css class for validators which is "field-validation-error" class

So, if I write a Validation message for a input on my form as below:

@Html.ValidationMessageFor(m=>m.Name)

Then the MVC runtime is setting the class of the message span by default as below:

<span class="field-validation-error" data-valmsg-replace="true" data-valmsg-for="Name">

My question is, how can I remove the css class "field-validation-error" and replace it with another class (my version) which i will be using it in only some areas of my application.

NiK · Accepted Answer · 2012-01-04 23:24:29Z

3

Ok...so I got it working by setting the base "field-validation-error" class as "form .field-validation-error" in the root css file...which means that this class will have the highest priority when the Html is generated and then in my View I included the new css class as mentioned below:

@Html.ValidationMessageFor(m=>m.Name, new { @class ="NewCssClass"})

This will generate the below markup:

<span class="field-validation-error NewCssClass" data-valmsg-replace="true" data-valmsg-for="Name">

As you can see the NewCssClass will override the default validation style specified in the "field-validation-error" class...

Cheers...

edited Jan 4, 2012 at 23:24

answered Jan 4, 2012 at 22:33

NiK

1,8571 gold badge23 silver badges38 bronze badges

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

1 Comment

Naresh Over a year ago

are we missing the second param there? Please correct me if I am wrong.

Leniency · Accepted Answer · 2012-01-04 22:21:25Z

0

Edit, you're right, I didn't read that far through the MVC source - just read the extension method source. Turns out those fields are static readonly with no options to change.

So, you're stuck with one of two choices:

Deal with using the set class names.
Write your own extension methods (or easier, just copy them from the MVC source and rename them).

edited Jan 4, 2012 at 22:21

answered Jan 4, 2012 at 21:04

Leniency

5,03430 silver badges37 bronze badges

3 Comments

NiK Over a year ago

thanks for the reply, the thing is HtmlHelper.ValidationInputCssClassName is a readonly field and cannot be set from your view???...

Leniency Over a year ago

Read more source and fixed my answer. Less than ideal though.

Roger Over a year ago

I like option C: don't use MVC validation!

Collectives™ on Stack Overflow

MVC 3 override validation message css

2 Answers 2

1 Comment

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related