CODEWITHSUNDEEP
asp.net-mvcasp.net-mvc-3validationjquery-validate
Paul Brown
Paul Brown

Reputation: 5016

Styling MVC3 Validation Messages

I love the default validation messages in MVC3 but now I am moving onto some much larger forms the form elements need to sit a lot tighter together. This causes issues with the default validation messages produced. They either wrap, leading to half the message appearing under the form element, or break my form layout completely.

Does anyone have a good solution to this problem?

Would setting the validation message to being a 'tooltip' help do you think? Would love to hear your suggestions and solutions.

Regards Paul

Upvotes: 0

Views: 510

Answers (2)

rino.batin
rino.batin

Reputation: 419

The default validation message is a SPAN. If you want to use a different element (e.g. IMG), you would need to create a custom validation message extension. Check out ValidationMessageHelper method in MVC to get an idea how the default SPAN is built. I think you can reuse the custom attributes like data-valmsg-for. Also, you need to modify the jquery.validate.unobtrusive.js assuming you are using unobtrusive ajax validation.

Upvotes: 1

Erik Funkenbusch
Erik Funkenbusch

Reputation: 93424

This is all dependant upon your layout. You can put the ValidationMessage anywhere you want, and style it any way you want. Just look at the output HTML and figure out how to lay out the message how you want it.

Upvotes: 1

Related Questions