1. 1
A Programme Under the Compumitra Series
The logic of validation allows us to move between the
two limits of dogmatism and skepticism.
- Paul Ricoeur
dogmatism = prejudiced, intolerant of a different opinion.
skepticism = doubt about the truth of something.
PROJECT: FEEDBACK FORM
Form Validation Controls - VB
LAB WORK GUIDE
3. 3
Form Validation Controls
There are 5 commonly used validation techniques that shall be explained in next
few slides. These are:
RegularExpressionValidator – To match input to a given pattern.
RequiredFieldValidator – To make sure that a field is filled by the user.
RangeValidator – To check input to fall between in a set of values
CompareValidator – To match values given into two fields.
CustomValidator – Based on functionality given by the user.
Here we shall try to explain you methods to check if the values put in different fields of a form are
correct as per user defined criteria. This checking is also known as VALIDATION.
We will try to create a sample project, the way you must have seen on different websites to fill
feedbacks etc. For your convenience the HTML template portion of the code shall be given to you
for direct copying and rest you will have to follow the actions in this presentation.
4. 4
UNDERSTANDING PROJECT STEPS
To make the process easier for you we shall follow these steps in making this project
Creation of a basic .aspx file.
Copying HTML Template code to quickly create a form.
Putting Required Validation Controls One By One.
Putting Button Control for Form Submission and Reset.
Putting a Panel Control to Show Project Output.
Putting Server Side Code for Custom Validation and other things.
6. 6
"VB" VB
Creation of Client Side File
• Follow Standard Website Creation Steps and set your path to
C:Learner<student-id>ProjestsProject1VB
• Add New Default.aspx page in your Website
12. 12
Putting Validation Controls: RegularExpressionValidator-1
1-Introduce a new line and Drag and Drop a
'RegularExpressionValidator' Validation control here.
2-Set 'Display' property equal to
'Dynamic'
3-And 'ErrorMessage' property
equal to 'Only alphabets are
allowed'.
4-Set 'ControlToValidate'
property equal to 'TextBox1'.
5-Set 'SetFocusOnError' property equal
to 'True'
6-And 'ValidationExpression' property
equal to '^([a-zA-z s]{0,500})$'
13. 13
Putting Validation Controls: RequiredFieldValidator
1-Introduce a new line and Drag and Drop a
'RequiredFieldValidator' Validation control here.
2-Set 'Display' property equal to
'Dynamic'
3-And 'ErrorMessage' property equal to
'This is a required field'.
4-Set 'ControlToValidate' property
equal to 'DropDownList1'.
5-Set 'InitialValue' property equal to '--
Select--'
6-Set 'SetFocusOnError' property equal
to 'True'
14. 14
Putting Validation Controls: RangeValidator
1-Introduce a new line and Drag and Drop a
'RangeValidator' Validation control here.
2-Set 'Display' property equal to 'Dynamic'
3-Set 'ErrorMessage' property equal to 'Only
the age value between 10 to 100 is
permitted'.
4-Set 'ControlToValidate'
property equal to 'TextBox2'.
8-Set 'Type' property equal to
'Integer'.
5-Set 'MaximumValue' property
equal to '100'
6-Set 'MinimumValue' property
equal to '10'.
7-Set 'SetFocusOnError'
property equal to 'True' And
15. 15
Putting Validation Controls: RegularExpressionValidator-2
1-Introduce a new line
and Drag and Drop a
'RegularExpressionVali
dator' Validation
control here.
4-Set 'ControlToValidate' property
equal to 'TextBox3'.
2-Set 'Display' property
equal to 'Dynamic'
3-And 'ErrorMessage'
property equal to Provide
email in the correct format
such as abc@abc.com'.
5-Set 'SetFocusOnError' property equal
to 'True'
6-And 'ValidationExpression' property
equal to 'w+([-+.']w+)*@w+([-
.]w+)*.w+([-.]w+)*'
16. 16
Putting Validation Controls: CompareValidator
1. First introduce a new line and Drag and
Drop a 'CompareValidator' Validation
control then set their given properties.
4. Set 'ControlToCompare'
property equal to 'TextBox3'.
5. And 'ControlToValidate'
property equal to 'TextBox4'.
2. Set 'Display' property equal to
'Dynamic'
3. Set 'ErrorMessage' property equal to
'Both email addresses should be same'.
6. Set 'SetFocusOnError' property
equal to 'True'.
17. 17
Putting Validation Controls: CustomValidator-1
1. Drag and Drop a 'CustomValidator' Validation
control then set their given properties.
4. Set 'ControlToValidate' property
equal to 'TextBox1'.
2. Set 'Display' property equal to
'Dynamic'
3. And 'ErrorMessage' property equal to
'You must type between 4 to 50
Characters in the Name field'.
5. Set 'SetFocusOnError' property
equal to 'True'.
18. 18
Putting Validation Controls: CustomValidator-2
1. First introduce a new line and Drag and Drop
a 'CustomValidator' Validation control then set
their given properties.
4. Set 'ControlToValidate' property
equal to 'TextBox5'.
2. Set 'Display' property equal to
'Dynamic'
3. And 'ErrorMessage' property equal to
'You must type between 10 to 300
Characters in the FeedBack field'.
5. Set 'SetFocusOnError'
property equal to 'True'.
20. 20
DIV Placement for Button Control
1. Introduce a new line and Drag
and Drop a 'DIV' Html control
from HTML Toolbox.
2. Set 'Align' property equal
to 'center' for all.
25. 25
DIV Placement for Panel Control
2. Set 'Align' property equal
to 'center' for all.
1. Introduce a new line and Drag
and Drop a 'DIV' Html control
from HTML Toolbox.
27. 27
Panel Control Placement
1. Drag and Drop a 'Panel'
control in newly added DIV. 2. Set 'BorderStyle'
property equal to 'Groove'
3. And 'BorderWidth'
property equal to '1px'.
5. Set 'Height' property equal to '150px',
'HorizontalAlign' equal to 'Left', 'ScrollBars' property
equal to 'Both' and 'Width' property equal to '70%'.
4. Set 'Visible' property
equal to 'False' for all.
29. 29
Table Creation
2. Set 'Rows:' equal to '5' and
'Columns:' equal to '2' for all.
'Insert Table' dialog Box will open.
3. Set 'Specify width:' equal
to '90' in percent.
4. Then click on 'OK'
button.
1. Click on 'Insert Table' in
'Table' menu.
30. 30
Label Control Placement
Type 'Name', 'Sex', 'Age', 'Email ID'
and 'Feed Back' in First Column of
the Table According to given
Template
31. 31
Output Place Holders Placement
1. Drag and drop 5 'Label' controls in
second Column According to given
Template.
2. Set 'Text' property equal to
'Blank' for all.
33. 33
If Page.IsValid = True Then
Label1.Text = TextBox1.Text
Label2.Text = DropDownList1.SelectedItem.Text
Label3.Text = TextBox2.Text
Label4.Text = TextBox3.Text
Label5.Text = TextBox5.Text
Panel1.Visible = True
End If
Server Side Code For Submit Button
Copy/Paste or Type this code in Button1_Click Event
Handler.
• Generate the Button1_Click handler in the VB code by double-clicking
over the Submit button control of aspx file.
34. 34
Server Side Code For Reset Button
TextBox1.Text = ""
DropDownList1.SelectedIndex = 0
TextBox2.Text = ""
TextBox3.Text = ""
TextBox4.Text = ""
TextBox5.Text = ""
Panel1.Visible = False
Label1.Text = ""
Label2.Text = ""
Label3.Text = ""
Label4.Text = ""
Label5.Text = ""
Copy/Paste or Type this code in
Button2_Click Event Handler.
• Generate the Button2_Click handler in the VB code by double-clicking
over the Reset button control of .aspx file.
35. 35
If (args.Value.Length < 4 Or args.Value.Length > 50) Then
args.IsValid = False
Else
args.IsValid = True
End If
Server Side Code For Name Character Count
Copy/Paste or Type this code in
CustomValidator1_ServerValidate
Event Handler.
• Generate the CustomValidator1_ServerValidate validation handler in the
VB code by double-clicking over the CustomValidator1 control in the
design view of .aspx file.
36. 36
If (args.Value.Length < 10 Or args.Value.Length > 300) Then
args.IsValid = False
Else
args.IsValid = True
End If
Server Side Code For Feed Back Character Count
• Generate the CustomValidator2_ServerValidate validation handler in the
VB code by double-clicking over the CustomValidator2 control in the
design view of .aspx file.
Copy/Paste or Type this code in
CustomValidator2_ServerValidate Event
Handler.
Run Code By pressing 'F5'
38. 38
--Select--
Output of Project-1
RangeValidator1 Ensures that the
value of an input should be between
10 to 100.
Outputs on browser
RegularExpressionValidator Ensures
that the value of an input should be
alphabets.
RegularExpressionValidator Ensures
that the provided email id should
be in correct format
--Select--
39. 39
--Select--
Output of Project-2
Output on browser after clicking Submit Button RequiredFieldValidator makes
this field as required field.
CompareValidator compares the
value of this field with EmailID field.
CustomValidator restrict the no of
input characters in a particular field.
Output on browser after clicking
Submit Button
40. 40
Output of Project-3
Fill the required information correctly
and then click on Submit button.
After clicking Submit button your
given information will display in panel.
Outputs on browser
Click on Reset button. Text area
of All the fields will set blank.
--Select--
42. 42
.aspx Code Explanation-1
<asp:CustomValidator ID="CustomValidator1" runat="server" ControlToValidate="TextBox1"
OnServerValidate="CustomValidator1_ServerValidate " SetFocusOnError="True" Display="Dynamic">
You must type between 4 to 50 Characters in the name field </asp:CustomValidator>
This statement creates a validation control
CustomValidator for Name field.
ControlToValidate property define
that which control will be validate.
Here this property set to "TextBox1"
i.e. TextBox of Name field.
OnServerValidate property Specifies the name of
the server-side validation function
('NameCharacterCount' function) to be executed.
43. 43
<asp:RegularExpressionValidator ID="RegularExpressionValidator1" runat="server"
ValidationExpression="^([a-zA-z s]{0,500})$" ControlToValidate="TextBox1" SetFocusOnError="True"
ErrorMessage="Only alphabets are allowed" Display="Dynamic"></asp:RegularExpressionValidator>
.aspx Code Explanation-2
This statement creates a validation control
RegularExpressionValidator for Name field. ValidationExpression property
Specifies the expression used to
validate input control .
ErrorMessage property set the text to display
the error message, when validation fails.
ValidationExpression="^([a-zA-z s]{0,500})$"
'[a-zA-zs]' part of the string define that
the validate control takes only upper
case or lower case English alphabet.
'{0,500}' part of the string define that the
validate control takes minimum '0'
character and maximum '500' characters.
44. 44
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server"
ControlToValidate="DropDownList1" Display="Dynamic" ErrorMessage="This is a required field"
SetFocusOnError="True" InitialValue="--Select--"></asp:RequiredFieldValidator>
.aspx Code Explanation-3
This statement creates a validation control
RequiredFieldValidator, which makes the Sex
field as required field.
SetFocusOnError property set the
focus of the cursor on validating
control, when validation fails.
InitialValue property set the initial
value of the control which is
treated as null value by
RequiredFieldValidator control.
45. 45
.aspx Code Explanation-4
<asp:RangeValidator ID="RangeValidator1" runat="server" ControlToValidate="TextBox2"
MaximumValue="100" MinimumValue="10" SetFocusOnError="True" Type="Integer" Display="Dynamic">
Only the age value between 10 to 100 is permitted</asp:RangeValidator>
This statement creates a validation control
RangeValidator for Age field.
MaximumValue property set the
maximum input value for the
validating control.
MinimumValue property set the minimum
input value for the validating control.
Type property set the input type for
the validating control.
46. 46
<asp:CompareValidator ID="CompareValidator2" runat="server" ControlToCompare="TextBox4"
ControlToValidate="TextBox5" SetFocusOnError="True" Display="Dynamic">
Both email addresses should be same </asp:CompareValidator>
.aspx Code Explanation-5
<asp:CustomValidator ID="CustomValidator2" runat="server"
OnServerValidate="CustomValidator2_ServerValidate" ControlToValidate="TextBox5"
SetFocusOnError="True" Display="Dynamic">
You must type between 10 to 300 Characters in the FeedBack field</asp:CustomValidator>
This statement creates a validation control
CompareValidator, which Compare the value
of validating control with specified control
ControlToCompare property The ID
of the control to compare with.
This statement creates a validation control
CustomValidator for Feed Back field.
OnServerValidate property Specifies the name of the
server-side validation function
('CustomValidator2_ServerValidate' function) to be
executed.
47. 47
If Page.IsValid = True Then
Label1.Text = TextBox1.Text
Label2.Text = DropDownList1.SelectedItem.Text
Label3.Text = TextBox2.Text
Label4.Text = TextBox3.Text
Label5.Text = TextBox5.Text
Panel1.Visible = True
End If
Server Side Code Explanation-1
These statements assign the
TEXT property of Labels.
Page.IsValid property is used to
check whether a page is valid
or not on button1 (Submit
button) click event.
These statements reset the
page on Button2 (Reset
button) click event.
TextBox1.Text = ""
DropDownList1.SelectedIndex = 2
TextBox2.Text = ""
TextBox3.Text = ""
TextBox4.Text = ""
TextBox5.Text = ""
Panel1.Visible = False
Label1.Text = ""
Label2.Text = ""
Label3.Text = ""
Label4.Text = ""
Label5.Text = ""
48. 48
Server Side Code Explanation-2
args.Value.Length count the no.
of characters in argument.
If (args.Value.Length < 4 Or args.Value.Length > 50) Then
args.IsValid = False
Else
args.IsValid = True
End If
If (args.Value.Length < 10 Or args.Value.Length > 300) Then
args.IsValid = False
Else
args.IsValid = True
End If
49. 49
Modification Trials -1
Set the Display property equal to Static for all
validation controls and run code.
Watch the effect.
Try to use RequiredFieldValidator validation control
with EmailID field.
Run and watch the effect.
Try to change the ForeColor property of
RangeValidator control Red to Blue.
Run and watch the effect.
50. 50
Modification Trials-2
Remove CustomValidator control and it's .aspx.vb
code from Name field and change property
ValidationExpression="^([a-zA-z s]{0,500})$" to
ValidationExpression="^([a-zA-z s]{4,50})$" of
RegularExpressionValidator control.
Run and watch that when you will enter less then 4
characters or more then 50 characters, it will display
"Only alphabets are allowed" error message.
Try to increase the no. of characters limit of FeedBack
field from 300 to 500.
51. 51
Error Trials
Change ValidationExpression property from "^([a-zA-z s]{0,500})$"
to "^([a-zA-z s])$" of RegularExpressionValidator control.
See that when you gives any input, Validation controls of Name field
produce an error message.
52. 52
Error Trials-2
Re-store the original code and change ValidationExpression
property from "^([a-zA-z s]{0,500})$" to "^([a-zA-z s]{4,50})$"
of RegularExpressionValidator control of Name field.
See that when you gives invalid input in Name field, it produce
same error message i.e.
53. 53
For further assistance take the help of your instructor or
Internet.
Practice Exercise
Create a project for Daily Sales Entry Form, which
have 5 fields namely Item ID, Item Price, Sales
Quantity, Sales By, Sales Price.
Program Should be calculate Sales Price
Formula for Sales Price Calculation
Sales Price = Item Price X Sales Quantity
Instructions
Item ID must be a Required Field.
Item Price must be a 5 digits number
Sales Quantity must be a required field
Sales By field should be accept 3 to 40 alphabets only.
User cannot enter any value in Sales Price field (Set
‘Enabled’ property of TextBox Control).
54. 54
Design View of Practice Exercise
Design View of Practice Exercise
55. 55
Learning Summary Review
Use of ASP:CustomValidator
Use of ASP:RegularExpressionValidator
Use of ASP:RequiredFieldValidator
Use of ASP:RangeValidator
Use of ASP:CompareValidator
Use of Panel
57. 57
Ask and guide me at
sunmitraeducation@gmail.com
Share this information with as
many people as possible.
Keep visiting www.sunmitra.com
for programme updates.
