46

I am using client side validation and I would like the message below to show only when I have an error. I am trying to use this a general error in case any field is invalid.
Currently

"* denotes required field"

is always showing even before validation.

<%: Html.ValidationSummary(false, "* denotes required field.")%>

I am using model binding to perform validation on client side and MVC.

tereško
  • 56,151
  • 24
  • 92
  • 147
MondayPaper
  • 1,529
  • 1
  • 15
  • 19

3 Answers3

87

If you use a developer tool in your browser to inspect the validation summary text you'll see that it has the class validation-summary-valid when it is clear but validation-summary-errors when there are form errors.

Therefore, just create a css rule as follows;

.validation-summary-valid {
    display:none;
}

and all should be good.

KyleMit
  • 45,382
  • 53
  • 367
  • 544
Ryan O'Neill
  • 5,065
  • 4
  • 44
  • 63
  • 24
    Why on earth is this not in the default stylesheet? – Giovanni B Jan 17 '13 at 20:07
  • 2
    And why on earth does the framework require a single message to summarize both valid and invalid models? – Carl G May 20 '13 at 01:16
  • 3
    Well if client-side validation is enabled, they can't remove the div from the page as they would for server-side, as the js needs to be able to show and hide it. They could have just used display:none to hide it, but instead they've used a class which gives you more control over styling (at the cost of making you set up a stylesheet rule either way). – James Morcom Oct 25 '13 at 16:55
  • Thanks for explaining the problem. For some reason this CSS won't work on mobile unless I embed it right in the page, instead of my site-wide CSS file. Instead of doing that, I wrapped the Html.ValidationSummary call in a conditional. I check ViewData.ModelState.IsValid first. – DustinA Nov 21 '14 at 16:31
4

I think the issue is the fact the Html.ValidationSummary has to appear before the Html.BeginForm otherwise the message is always displayed.

Mark P
  • 65
  • 2
  • 2
    But if you do that, you lose the client side checking. – Ryan O'Neill May 03 '11 at 18:52
  • 3
    Moving Html.ValidationSummary above Html.BeginForm made it stop appearing altogether (MVC 4 / Razor). – SushiGuy Jun 11 '13 at 17:46
  • 2
    Agree - the problem of the summary showing all the time only occurs when ClientValidationEnabled is true. This solution is effectively the same as setting that to false by breaking the client side validation. – James Morcom Oct 25 '13 at 16:51
  • 1
    As noted, this just breaks it the other way around. – twip Jan 27 '16 at 18:55
0

Initially I was checking for a List property on page load so I thought of passing a new model. Then the validation summary just appeared. When I changed my code from

return View(new myModel)

to

return View()

the validation summary did not appear on Get. I also added a null check on the model when checking the property so I can use the latter code.

Nathan Tuggy
  • 2,239
  • 27
  • 28
  • 36
Kristianne Nerona
  • 677
  • 8
  • 22