validation summary - hide the errors but retain the validation summary header

Tuesday, 2 June 2009

The validation controls are extremely useful as virtually every web application is awash with forms, and all input must be verified to ensure that required fields are actually filled, email addresses are valid, and so on.

During production of our new .net cart Kartris, we originally avoided using the validation summary and instead relied on highlighting the validators themselves in bright red boxes to draw attention to errors. We wanted simple error tags such as Required! and Invalid Value! next to the field at issue, rather than 'The email address field is blank' or whatever. Not only do these smaller tags save space, they cut to the point much more directly and also minimize the amount of translation needed since all of the text like this in our application is multi-language. So using the same tag text on all required fields saves a lot of effort.

The problem was that on a small screen, the submit button for the form was down the bottom while the error might be at the top. If a validator error appeared at the top of the page, you might not see it. Instead you just notice that the form button does not appear to work.

One option is to put the focus on the error itself, but this can be a little sudden and disconcerting as the page takes on a life of its own and moves you to another section. It is easy to become disoriented on a large page.

So we decided to put a validation summary next to the submit button at the foot of the page. This would appear next to the submit button when a validator somewhere was stopping the page submitting. The only problem was that the validation summary includes the error text for each validator that fails. So you end up with something like:

There are errors above

* Required!
* Required!
* Invalid input!
* Required!

Needless to say, the errors themselves are of no use at all, we only really want the first part (the header) that tells you there are errors, so the user can scroll up to find them. Sadly the .net validation summary control does not appear to have any setting to allow the header to remain visible but to hide the individual errors. After considering a variety of rather complex options (such as writing custom controls, etc.) a cup of coffee and a break resulted in a brainwave. Simply hide the unwanted errors with CSS. It is so simple that I am embarrassed that this did not occur to me earlier but I did not find any other mention on the web of this solution so I thought I'd post my experience in case it helps anyone else.

First, ensure you have your validation controls and validation summary working. There is plenty on Google to help you if you are stuck at this part.

Next, setup your validation summary as follows:

<asp:ValidationSummary CausesValidation="True" ID="valSummary" runat="server" ForeColor=""
CssClass="valsummary" DisplayMode="BulletList" HeaderText="There are errors above" />

In case you are wondering, you need to explicitly state ForeColor="" if you want to change the color of the validator or summary text with CSS. Without anything specified, will infuriatingly default to red, regardless of what your CSS says. Not good if you have a red background to highlight the errors!

But back to the task at hand; the DisplayMode is important here - by using 'BulletList' we get the errors formatted as an unordered list, such as:

<li>Error 1</li>
<li>Error 2</li>
<li>Error 3</li>

We can now use CSS using the class we specified, 'valsummary', to hide the unordered list tag:

.valsummary ul
display: none;
visibility: hidden;

And that's it. Now we get the header of the validation summary to tell us there are errors above, without parrotting the text from all the validators themselves.

comments powered by Disqus
Powered by kartris