Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
When you place an ASP.NET Validator control within a DetailsView control, its formatting is controlled by the Container control. That is, the DetailsView. And it's a good idea to apply formatting to the validator to make sure that it stands out and the user sees it clearly. For this demonstration, I'll be working in the file TitleInsertValidationMessages.aspx. In this file I have created a number of validators and applied them to the various form controls, the Price and PubDate. I will start by running the page in the browser and show you the nature of the problem. The DetailsView control that contains both the form controls and the validators has a particular background color. I'll leave the Price blank and type in a non-date value into the PubDate control. And then I'll click the Insert link, and you will see that the error messages using their default formatting are hard to read against the background of the Details View.
You will also see that there is a bunch of extra space between the error messages and the controls themselves. That's because with their current settings, the validation controls reserves space for the area that's going to be needed to display the messages. It's possible to make this more dynamic so that the controls only appear and the form only makes adequate space for the messages when an error condition exists. So I'll correct both of those issues. First, I'll deal with the space issue. Each of the validators has a property called Display. When I drag to the controls in Design View, the Display wasn't set, but it defaults to something called Static. That means that when the form is initially presented, it reserves the space that might be needed for an error. Here is how we can fix that.
I will go to the first validator. The RequiredFieldValidator for the Price control and I'll add a Display property and I'll set it to a value of Dynamic. Now, I'll copy that setting and then I'll paste it into each of the other validators. I will select Display="Dynamic", and press Ctrl+C to copy. Then I'll go to the RangeValidator for the price and paste it in. And I'll do the same for the RangeValidator for the PubDate control. Right around line 32 of the file there is a break tag between the two validators. You will only see one validator at a time. Either the RequiredFieldValidator's message or the RangeValidator's. You won't be showing both messages simultaneously, so the break tag can go away. And now watch what happens when I run the page.
And you will see that extra space has been eliminated. Then I'll click the Insert link and you will see that the form presentation is modified dynamically to make room for the error message. And if I type-in a non-date value into the PubDate and click Insert again, once again you will see that the space is allocated as needed. So that's the result of setting the property Display to a value of Dynamic. Next I'll deal with the formatting issues. It's possible to apply individual formatting options to each control. Let's take the RequiredFieldValidator as an example. I'll place the cursor inside the RequiredFieldValidator tag.
I'll press Enter and I'll set a property called BackColor, and I'll select a color of #EEEEEE, which is a light gray. I'll save the change and run the page. And then I'll click the Insert link and you will see that the error message is now very easy to read. The problem with this approach though is that you will need to apply that same setting to each individual Validator control not just in this page but throughout your website. It's a lot better to create a single set of rules and then apply them to all validators. And once again this is where Cascading Style Sheets can help. I'll solve this problem by creating a single CSS class and then I'll tell each Validator control to use that class by setting its CSS Class property.
Now I'll do a little bit of Cascading Style Sheet work. I'll go the Solution Explorer and locate the file styles. css and double-click it to open it. Now I'll go to the CSS Outline panel that appears automatically. I'll right-click and select Add Style Rule. I'm going to be defining a class. So, I'll select the Class name, click into the input, and I'll name my new CSS Class validationError, and then I'll click OK. That creates the Validation Error class declaration.
From here I can either work in the CSS dialog box, or I can just do the code. I know what the code should be, so I'll just type it in. I'll put in background-color, and set it to a value of #EEEEEE. Be sure if you are typing this from scratch that you include the pound sign before the six character color value. And then I can also set also Cascading Style Sheet properties. For example I'll set the font-weight to a value of bold. So that class is now available to all pages in my website because the style. css file is linked into each of these pages. I'll save the changes, and then I'll go back to the page titled InsertValidationMessages.aspx.
I will go to the RequiredFieldValidator and I'll remove the BackColor setting and instead I'll put in CssClass= and then I'll select the class name ValidationError, which shows up automatically in Visual Web Developer because it's constantly monitoring the contents of the styles.css file that's linked into this page. Now I'll select that declaration of CssClass and press Ctrl+C to copy it to the Clipboard and I'll go to each of the two RangeValidators and paste it in.
I'll save those changes and run the page again. I'll once again leave the Price blank and I'll type-in a non-date value in the PubDate to trigger its validation. And I'll click Insert a couple of times and you will see that both validation error messages are displayed and they both have the same background color and the same bold font. So that's how you can centralize the formatting of your error messages. So in this video I have described how to cause the validation objects to only allocate space dynamically, when the space is needed. And I have also described how to define and use common formatting for all Validator objects using Cascading Style Sheet classes and the CSS Class property.
Get unlimited access to all courses for just $25/month.Become a member