Click here to Skip to main content
13,404,627 members (36,764 online)
Click here to Skip to main content
Add your own
alternative version


5 bookmarked
Posted 1 Jan 2011

Validation Controls in ASP.NET for Beginners

, 1 Jan 2011
Rate this:
Please Sign up or sign in to vote.
This article makes you understand what is validation control, how you will use server side controls.

1. Introduction

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.

  1. 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.
  2. From the dialog displayed, select the Absolutely positioned option from the combo box.
  3. 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.
  4. Place required field validation control next to the Name text box.
  5. Place the Compare validation control next to the Drop Down List control.
  6. 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.

3. Coding

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:

//Postback_001: Hide the Radio Button 3, when the Accout type is Forever
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

  1. 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.
  2. 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:

  1. Extract the attachment
  2. Select File | Open | Web Site…
  3. Select the extracted folder

To see the Form Design live, download the screen cam here.


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Sivaraman Dhamodharan
Software Developer iSOFT
India India
I am working as software engineer in iSOFT R&D. I have been come across C++,MFC, .net technologies. I do like playing video games, reading books.


You may also be interested in...


Comments and Discussions

GeneralMy vote of 1 Pin
Marcus Kramer2-Jan-11 8:26
memberMarcus Kramer2-Jan-11 8:26 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web03 | 2.8.1802120.2 | Last Updated 2 Jan 2011
Article Copyright 2011 by Sivaraman Dhamodharan
Everything else Copyright © CodeProject, 1999-2018
Layout: fixed | fluid