Question

The project is MVC 3 with Razor views and JQuery unobtrusive validation. Our web pages are set up with the label above the textbox and the validation message falls under the textbox. Usually the textbox is about 150px wide so the validation message tends to be rather narrow and tall. It doesn’t look nice.

I would prefer to utilize the Html.ValidationMessageFor helper to position all of the messages together at the top of the page, preferably in a bulleted list. I haven’t found a way to “turn off” the display of the messages that are next to the textboxes, although I can use a validation summary to catch the property errors on submit.

Many of the validations are occurring in popups and we are using Telerik for the popups.

I would prefer to avoid editing the open source js files, if possible.

Answer 1

Remove the Html.ValidationMessageFor() items in your view => this will disable the messages appearing beside your textboxes.

Next, add Html.ValidationSummary(false, "Your Message") at the point that you want the bulleted list to appear (must be within the using(html.BeginForm() call). The false in this Html Helper is an overload that instructs the summary to not exclude property errors. For styling, you will need to do some CSS work.