Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
Once you have modified a DetailsView control to use Template fields instead of Bound fields, you are then ready to add validator controls. Each validator control is bound to a single form control and each form control can be validated by one or more validators. You place the validator controls in the same Template fields that host the textboxes or other data entry form controls that the user interacts with to provide data. For this demonstration I'll work with the page named TitleInsertValidation.aspx. In this version of the page there are two Template fields.
One for the Price and the other for the PubDate columns. They each have a TextBox control that allows user to type-in values but currently neither is validated. I'm going to show you how to add validator controls both in Design View and through code. I will start off in Design View. In Design View I'll select the DetailsView control. I'll open its Task list and select Edit Templates. I'll pull down the Template list and show you that there are two sets of templates for each of the two fields that are used in Template fields. Each Template field supports an ItemTemplate for displaying data, and AlternatingItemTemplate that allows you to setup say alternating background colors.
And then this one, the EditItemTemplate. The EditItemTemplate is the one that's used by default for either inserts or updates. I'll select that item for the Price field and I'll show you visually that it's showing the TextBox control that's already a part of the template. Now, I'll add the validator. I'll get out of Full Screen so I can see all of my panels. Then I'll go to the Toolbox panel. I'll move the cursor over the Toolbox tab and then pin the Toolbox panel into place. The validator controls are in a category labeled Validation. There are a number of validators you can choose from. I'm going to be using the RequiredFieldValidator and the RangeValidator.
The first one I'm going to implement will say that the price is required. I'll drag RequiredFieldValidator object and I'll place it inside the template. Then with the RequiredFieldValidator object selected, I'll go to the Properties panel. I'm going to double-click the Properties panel header to make it float, and then I'll drag it out so that it's wider and easier to read. There are two critical properties that you should set. First the ControlToValidate property gets set to the ID of the form control you want to validate. If you are working in the Properties panel, you can click into the ControlToValidate property and then pull down the list and you should see the only form control that's in the template. I'm selecting the Price field.
Then go to the ErrorMessage. The ErrorMessage defaults to the type of control, ReguiredFieldValidator, but it should be customized. And this is the error message that the user will see if they break the validator rules. I'll set the ErrorMessage to 'Price is required.' Now, I'll save the changes and let's see the behavior. I will run the page in the browser, and in the browser I'll simply click the Insert link in the DetailsView control. It's a little hard to see but the actual message Price is required is being displayed right under the control.
I'll show you how to fix the visual problems in just a moment. But let's add a couple of more validators. I'll close the Properties panel so I can return to Design View, and then I'll press Enter to move down to the next line and I'll also add a RangeValidator. A RangeValidator can be used to specify a particular data type: dates, numeric values and so on. And you can also set minimum and maximum values that the user is allowed to type-in. With the RangeValidator selected, I'll press the F4 key to bring back the Properties panel. I'll go to the ControlToValidate. I'll bind it to the same form control as before, price, and I'll set a different ErrorMessage.
This time the ErrorMessage is 'Price must be between 1 and 100.' Next, I'll implement the actual business rules. I'll scroll down a bit to the Type property and I'll set the Type to Double. Set it to Integer for whole numbers or Double for fractional numbers, such as a price. And then I'll set minimum and maximum values. I'll click into the MinimumValue and set it to 1, and the MaximumValue and set it to 100. I'll save my changes and I'll run the page again. And you will see a lot of extra space here. I'll show you how to fix that a little bit later, but now I'll simply click the Insert button and the message Price is required is displayed. And then I'll fill in a value that's non-numeric and click the Insert link again and this time I see the error message, Price must be between 1 and 100. So, that's how you setup the validators in Design View.
Now to do the same thing in Source View, if you prefer, I'll show that I'm going to go to Source View and then I'll press Alt+Shift+Enter to go to Full Screen and I'll locate the RangeValidator that I created for the price. I'll select the RangeValidator code and I'll copy it to the Clipboard. Then I'll go down to the Template field for the PubDate and I'll paste that code in the place within that template. Now I'm going to make changes to the RangeValidator that I just created. First I'll change the ID. It has to be unique within the page. I'll change it from RangeValidator1 to RangeValidator2. Then I'll set the ControlToValidate, changing it from price to pubdate. And I'll set the ErrorMessage to a value of 'Please enter a valid date.' When you use the RangeValidator to validate dates, the minimum and maximum values must be phrased as dates. I'll put in a broad range of dates, setting the MaximumValue to 12/31/2100, and the MinimumValue to 1/1/1900.
And here is the critical piece you must change. The Type attribute which was set to Double instead should be set to Date. So now I have another validator this time connected to the PubDate form control. When user fills in the form if they don't fill the control in with a well-formed date, this validator will trigger and it will show the error message that I specified. Because I didn't add a required validator for this textbox, the rule is that the user has to either enter a well-formed date or they can also leave it blank. I'll save the changes and run the page again.
And I'll click the Insert link and show that I'm only getting the message, Price is required. But now I'll click into the PubDate control and type a value that's not a date, such as the words 'not a date,' and click Insert. And now I also see the message, Please enter a valid date. Now as you can see there are some display issues that are implicit when you add these controls without applying formatting. But I'll show you how to deal with the formatting issues in a separate video.
Get unlimited access to all courses for just $25/month.Become a member
61 Video lessons · 92902 Viewers
82 Video lessons · 104251 Viewers
71 Video lessons · 75982 Viewers
56 Video lessons · 107338 Viewers
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.
Your file was successfully uploaded.