|
Validation Controls
Let's now work with validation controls. The following sample is an online hotel
room booking service which asks the user to enter some values and checks
whether he or she is eligible to book a room in the hotel. This page will ask for
Name, Age, Income, Email Address and Customer's Budget and makes use of different
validation controls to perform the task. This is not a real world scenario
but is just a sample which was created for the purpose of understanding.
To start off, drag six labels, five textboxes and a button onto the form. Assign the
text, Name to Label1, Age to Label2, Income to Label3, Email Address to Label4 and
Your Budget to Label5. Make sure you have Textbox1 beside Label1, TextBox beside label2
and so on. Look at the sample at the bottom of this page for more. Now, drag all the
validation controls on to this form. The Required Field validator will be assigned
to TextBox1 and the user will be required to enter his name. Leaving this field blank
will show an error. The Compare validator is assigned to TextBox2 and is used to compare
the age the user enters and checks if it is greater than a predefined age and if not
displays an error. The Range validator is assigned to TextBox3 and checks to see the
income entered by the user falls between a predefined range. The Regular Expression
validator is assigned to TextBox4 and checks to see if the email address entered by
the user matches the format of an email address and if it doesn't then displays
an error. The Custom validator is assigned to Textbox5 and checks the value entered
by the user with a function and displays an error if it doesn't match the value
specified in the function.
Before proceeding further you need to assign some properties for the validation
controls.
Select the RequiredField validator and in the properties window set
the ControlToValidate property to TextBox1 and the ErrorMessage to "Name is Required".
Select the Compare validator and in the properties window set the ControlToValidate
property to TextBox2, ErrorMessage property to "Age should be greater than 18 to use
our service", Operator property to "Greater Than" and the ValueToCompare to 18.
Select the Range validator and set the ControlToValidate property to TextBox3, ErrorMessage
to "Income should be between 1000 and 12000 to book a room in our hotel", Maximum
value to 12000 and Minimum value to 1000.
Select the Regular Expression validator and set the ControlToValidate property to
TextBox4 and the ErrorMessage property to "Not a valid email address". Click the ellipse
button in the ValidationExpression property and in the RegularExpressionEditor select
"Internet E-mail Address".
Select the Custom validator and in the properties window set the ControlToValidate
property to TextBox5, ErrorMessage property to "We do not have a room for the amount
you specified" and the ClientValidationFunction property to CheckAmount. Click
the HTML tab in the designer window and paste the following code anywhere in the <form> tag.
The following code is a simple function. You can perform more than this.
This function is just for the purpose of explanation.
<script language="vbscript">
sub CheckAmount(amount, arguments)
if(arguments.value>1000)then
arguments.isvalid=true
else
arguments.isvalid=false
end if
end sub
</script>
|
The above mentioned script is written in VBScript and it checks to see the value
entered in TextBox5 is greater than 1000 and if it not displays an error.
After you are finished with all the required settings double-click the button to open
it's click event. The following code will display all the data you entered on
the label (label6). The click event of the button looks like this:
Private Sub Submit_Click(ByVal sender As System.Object, ByVal e As _
System.EventArgs) Handles Submit.Click
Label6.Text = TextBox1.Text & " " & TextBox2.Text & " " & TextBox3.Text _
& " " & TextBox4.Text & " " & TextBox5.Text
End Sub
|
Once you are finished, run the form and try to test all the validation controls
by entering values and hitting the submit button. If no value is entered or a wrong
value is entered then the ValidationSummary displays those errors when you hit
the Submit button.
Live Code Demo
|