This article makes you understand what is validation control, how will you use server side controls. We will create a simple ASP.NET page to create a user account creation page. Below is screen shot of the form design:
How It Works
The user must enter his or her name in the first
textbox. Then using the
combobox, the account type should be selected. Then the resident country
combobox is used to specify the country. If name and account type is not specified, the form should report it so that user should make the correction. When account type selected is
Forever, the other country radio button should be hidden.
2. Designing the Form
To know how the form is designed, you can download a screen-cam video from here. It is recorded when I am making the form ready for coding. Alternatively, you can go through this section to start the design.
- As you see, the controls are not in the default layout. If you already placed two or more controls, you are aware of the default flow layout. To make it appear like the above screen shot; change the layout to absolute position. To do that, click on Layout|Position|Auto Position Option.
- From the dialog displayed, select the Absolutely positioned option from the combo box.
- After this, place four Labels, one text box, one Dropdownlist, 4 Radio buttons, one push button control on the form. Place it as shown in the above screen shot.
- Place required field validation control next to the Name text box.
- Place the Compare validation control next to the Drop Down List control.
- Place validation summary at the end of the form.
To set the properties: Open the attached website for your reference, select each control and set the Property values that appears in bold for your web form. Or if you already downloaded the video, you can sit back and watch it. I will explain some important properties below:
Account Type Dropdown: The items are added using the items collection. Then the Auto-Post back property is set to
false. If you note down, the How it works in the introduction section tells you that a radio button visibility is set to
false when the last account type is selected. So the auto post back will send all the form information back to the web server when the selection in the combo box is changed.
Resident Radio button: For all the radio buttons, Group Name is set to
grpResident. This allows all the four radio buttons in one group.
Required field: If you remember, this control is placed next to the Name text box. The control to Validate property tells, which control needs to be validated by this validation control. In our example, text box is selected for this property. Error Message property specifies, what error message should be displayed when the validation control reports a failure. However, this error text will be displayed on the Validation summary control. The text property tells what needs to be displayed in the validation control itself when the validation fails. Error message is set to: Name is a required field. Do not leave it Empty. And text property is set to: *.
In our example, when the done button is clicked leaving the text box empty, an asterisk is displayed next to the text box and error message set to this control is displayed in the validation summary control added at the end of the form.
Compare Field: This validation control as the name states compares a value and reports success or failure about it. In our example, if you do not make any selection, the error is shown in the validation summary control displayed at the end of the form. In the reference application, have a look to the bold property values for this control. Below is the explanation:
We do specify to this what needs to be compared. So pick your account.
string is specified to the
ValuetoCompare property. Then as the type property is already a
string, we do not need to do anything. Set the Operator to Not Equal. Other property I hope you can understand as you already did it for the required field validation control. Now, when you change the selection, the Not Equal comparison is performed against the constant
string. Pick your Account.
Click the drop down list control in the property view and double click the Selected Index changed property. This will bring you to event handler code. Now place the following code in the event handler:
if (DropDownList1.Text == "Forever")
RadioButton3.Visible = false;
RadioButton3.Visible = true;
Note that we are setting the visibity of the Other Radio to
false when the selection is “
Forever”. As you set the Auto-Post back property to
true, the control sends the post back message from the client to the server and this event runs in the server machine and the HTML is pushed back to the client with a hidden radio button.
4. Run the Application and Test it
- When the form is visible, click the Done button. Note the required field and Compare validation is performed and the error message is displayed on the summary validation control.
- Fill the name and Select Forever from the combo box control. Note that Server Auto post back by the push button is performed and other radio button is disabled.
Note: The attached application is created in VS2005 IDE. If you have the latest version, say “yes” to the conversion wizard.
To use the attached application:
- Extract the attachment
- Select File | Open | Web Site…
- Select the extracted folder
To see the Form Design live, download the screen cam here.