How to display only one error message using Html.V

Question

I have a view (skipping redundant code for simplicity):

@model CompetencyModel
@using (Html.BeginForm())
{
    @Html.ValidationSummary()
    @Html.EditorFor(model => model.Results)
}

When I submit, if validation fails inside EditorFor, ValidationSummary shows the list of all validation messages for each item coming from EditorFor.

This screenshot is a view, where EditorFor is a single line with radio buttons:

But I need a single error message just saying that something failed. I tried:

@Html.ValidationSummary(true)
@Html.EditorFor(model => model.Results)

But it doesn't show anything. I tried

@Html.ValidationSummary(true)
@Html.EditorFor(model => model.Results)
@Html.ValidationMessageFor(model => model.Results, "ERROR !!!")

But it doesn't show anything.

What am I doing wrong? Thank you.

Solution This will do the trick.

<style>.validation-summary-errors ul { display: none; }</style>
@Html.ValidationSummary("Can't save, you must answer all questions !!")

Answer 1

I think you can use the following rule to hide all messages except the first:

.validation-summary-errors ul li:nth-child(n+2) {
    display:none;
}

Answer 2

The ValidationExtensions.ValidationSummary method will always return an un-ordered list of items.

Another person asked this question and choose to use JQuery to hide the items: https://stackoverflow.com/a/10837702/1220302

Another solution you could do is only display the first item in the list using CSS's nth-child pseudo tag. This of course is dependent on the browser version you're using though:

I think something like this:

.validation-summary-errors ul li:nth-child(-n+1) {
    display:none;
}