Allow hiding ValidationSummary content when there are no errors

[Bartmax]

<div asp-validation-summary="ValidationSummary.ModelOnly" class="alert alert-danger alert-dismissible" role="alert">
    <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
    <h4>Oops! Looks like there were some errors.</h4>
</div>

If I use the validation summary tag helper with custom code, this get renders even when there's no error. I think validation summary should support (or always behave) like don't render anything if there's no error something like. <div as-validation-summary-visible="Always|OnError">

[DamianEdwards]

Can you explain this a little more? What do you mean by "custom code"? Are you saying the <h4> is always being rendered, even when there is no validation error currently?

[Bartmax]

Exactly, and the button too.

I currently have :

        @if (ViewData?.ModelState[""]?.Errors?.Any() == true)
        {
        <div asp-validation-summary="ValidationSummary.ModelOnly" class="alert alert-danger alert-dismissible" role="alert">
            <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4>Oops! Looks like there were some errors.</h4>
        </div>
        }

to achieve the desired output.

I'm on beta3 btw.

[dpaquette]

@Bartmax I definitely see the value in this. I have had similar problems before when trying to add additional content or styling to the validation summary div.

The problem with the conditional rendering you are using now is that it doesn't work with client side validation. In some cases, model level errors will not be displayed on the client side because the div is not there.

I think this might be something that is better handled on the client side. If there is a class or attribute added to the validation summary then we can easily handle the show/hide via CSS. This would likely require a change to both the unobtrusive validation JS and the server side GenerateValidationSummary code.

[dougbu]

@dpaquette

If there is a class or attribute added to the validation summary then we can easily handle the show/hide via CSS

This is supported today: The GenerateValidationSummary() code adds one of the validation-summary-errors or validation-summary-valid classes depending on the status when the page is generated. Beg, borrow, or steal JavaScript code that does whatever you like for <div> elements with those classes.

[Bartmax]

@dougbu validation-summary-errors or validation-summary-valid are only used after the form submission. So when you enter the page for first time (get request) you don't get any of those classes on div.
Knowing the existence of them I can get to get the desired behavior without c# code but with css.

note that validation-summary class is custom app class, not framework one

css:

.validation-summary{
    display:none;
}
.validation-summary.validation-summary-errors{
    display:block;
}

cshtml:

<div asp-validation-summary="ValidationSummary.ModelOnly" class="validation-summary alert alert-danger alert-dismissible" role="alert">
    <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
    <h4>Oops!</h4>
</div>

I'm not sure if there's anything to do here, I leave it just in case. Feel free to close it.

[dougbu]

I'm not sure if there's anything to do here

There is something we could do though it may cause more trouble than it's worth. My "supported today" point was specifically about existing CSS classes.

We could add an optional attribute to the <div asp-validation-summary...> helper that disables rendering of the <div> or <div> body when the model is valid. One potential problem is interactions between that and Unobtrusive validation, which updates the <div> if client-side validation errors occur.

[CezarCretu]

The way this currently works (beta7) seems unintuitive to me: using ValidationSummary.ModelOnly, the validation-summary-errors class is still generated even if there aren't any non-property validation errors to display but the form is otherwise not valid. This all means that the approach outlined by @Bartmax would result in displaying a div with a generic message of no use when there are property errors handled in other ways.

While I understand that asp-validation-summary="ValidationSummary..." acts more like a filter for the type of errors that are displayed, I think that having an additional attribute that controls the rendering (not necessarily disabling it, it could be an additional class) based on the same enum would be useful.

[Bartmax]

Maybe we need a validation-summary-initial class with a default display:none, for the 'missing' state.

There are 3 states, initial, valid and error. We currently have classes for valid and error. Do you think it add value to have a validation-summary-initial class ?

[DamianEdwards]

Probably easier to just always apply a class of validation-summary, and then stack the validation-summary-valid and validation-summary-error when they apply. That way, you can do the following to get the desired behavior:

.validation-summary { display:none; }
.validation-summary.validation-summary-valid, .validation-summary.validation-summary-error { display: block; }