Project1 CS

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 - CS
LAB WORK GUIDE

2
OUTLINE
Form Validation Controls using C#
Example Template Creation.
Code Creation.
Output Evaluation.
Code Explanation.
Modification Trials
Error Trials
Practice Exercise.
Review Summary.
References.

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
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.

5
Creation of basic .aspx file

6
Creation of Client Side File
• Follow Standard Website Creation Steps and set your path to
C:Learner<student-id>ProjestsProject1CS
• Add New Default.aspx page in your Website

7
Adding HTML Form Template code

8
<h1 align="center">FEEDBACK FORM</h1>
<table cellpadding="5" cellspacing="2" width="70%" border="5" align="center">
<tr>
<td width="20%">
Name:
</td>
<td>
<asp:TextBox ID="TextBox1" runat="server" Width="409px"></asp:TextBox>
</td>
</tr>
<tr>
<td width="20%">
Sex:
</td>
<td >
<asp:DropDownList ID="DropDownList1" runat="server" Height="18px" Width="97px">
<asp:ListItem Selected="True">--Select--</asp:ListItem>
<asp:ListItem>male</asp:ListItem>
<asp:ListItem >Female</asp:ListItem>
</asp:DropDownList>
</td>
</tr>
<tr>
<td width="20%">
Age:
</td>
<td>
<asp:TextBox ID="TextBox2" runat="server" Style="margin-left: 0px" Width="98px"></asp:TextBox>
</td>
</tr>
HTML Template code-1
Copy/Paste this code after the Div tag in Source view

9
<tr>
<td width="20%">
Email
</td>
<td>
<asp:TextBox ID="TextBox3" runat="server" Width="409px"></asp:TextBox>
</td>
</tr>
<tr>
<td width="20%">
Re-Enter Email
</td>
<td>
<asp:TextBox ID="TextBox4" runat="server" Style="margin-left: 0px" Width="409px"></asp:TextBox>
</td>
</tr>
<tr>
<td width="20%" valign="top">
Feedback
</td>
<td align="left">
<asp:TextBox ID="TextBox5" runat="server" Style="margin-left: 0px" Width="409px"
Rows="5" TextMode="MultiLine"></asp:TextBox>
</td>
</tr>
</table>
<br />
HTML Template code-2
Copy/Paste this code after previously pasted code

10
Template Design View
Design view of Given template
•Go to design view by clicking
on 'Design' tab.

11
Putting Required Validation Controls

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
Putting Validation Controls: RequiredFieldValidator
'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--'
to 'True'

14
Putting Validation Controls: RangeValidator
'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'
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
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'.
to 'True'
6-And 'ValidationExpression' property
equal to 'w+([-+.']w+)*@w+([-
.]w+)*.w+([-.]w+)*'

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'
5. And 'ControlToValidate'
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
Putting Validation Controls: CustomValidator-1
1. Drag and Drop a 'CustomValidator' Validation
control then set their given properties.
4. Set 'ControlToValidate' property
'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
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
'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'.

19
Putting DIV HTML Controls for Submission
and Reset Button

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.

21
Putting Button Controls for Form
Submission and Reset

22
Submit Button Placement
1. Drag and Drop 'Button' in newly
added DIV.
2. And set 'Text' property equal to
'Submit'

23
Reset Button Placement
1. Drag and Drop 'Button' in DIV
2. And set 'Text' property equal
to 'Reset'

24
Putting DIV HTML Controls for Panel
Control

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.

26
Putting a Panel Control to Show
Project Output

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.

28
Table Creation in Panel Control

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
Label Control Placement
Type 'Name', 'Sex', 'Age', 'Email ID'
and 'Feed Back' in First Column of
the Table According to given
Template

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.

32
Putting Server Side Code for Custom
Validation and other things

33
if (Page.IsValid)
{
Label1.Text = TextBox1.Text;
Label2.Text = DropDownList1.SelectedItem.Text;
Panel1.Visible = true;
}
Server Side Code For Submit Button
Copy/Paste or Type this code in Button1_Click Event
Handler.
• Generate the Button1_Click handler in the CS code by double-clicking
over the Submit button control of aspx file.

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 CS code by double-clicking
over the Reset button control of .aspx file.

35
if (args.Value.Length < 4 || args.Value.Length > 50)
{
args.IsValid = false;
}
else
{
args.IsValid = true;
}
Server Side Code For Name Character Count
CustomValidator1_ServerValidate
Event Handler.
• Generate the CustomValidator1_ServerValidate validation handler in the
CS code by double-clicking over the CustomValidator1 control in the
design view of .aspx file.

36
{
}
else
{
}
Server Side Code For Feed Back Character Count
• Generate the CustomValidator2_ServerValidate validation handler in the
CS code by double-clicking over the CustomValidator1 control in the
design view of .aspx file.
CustomValidator2_ServerValidate Event
Handler.
Run Code By pressing 'F5'

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
--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
Click on Submit button.

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--
Click on Submit button.

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
<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>
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
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server"
ControlToValidate="DropDownList1" Display="Dynamic" ErrorMessage="This is a required field"
SetFocusOnError="True" InitialValue="--Select--"></asp:RequiredFieldValidator>
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
<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>
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
<asp:CompareValidator ID="CompareValidator2" runat="server" ControlToCompare="TextBox4"
ControlToValidate="TextBox5" SetFocusOnError="True" Display="Dynamic">
Both email addresses should be same </asp:CompareValidator>
<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>
CompareValidator, which Compare the value
of validating control with specified control
ControlToCompare property The ID
of the control to compare with.
CustomValidator for Feed Back field.
OnServerValidate property Specifies the name of the
server-side validation function
('CustomValidator2_ServerValidate' function) to be
executed.

47
if (Page.IsValid)
{
Label2.Text = DropDownList1.SelectedItem.Text;
Panel1.Visible = true;
}
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 = "";
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.

48
{
}
else
{
}
{
}
else
{
}
Server Side Code Explanation-2
args.Value.Length count the no.
of characters in argument.

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
Modification Trials-2
Remove CustomValidator control and it's .aspx.cs
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
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
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
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 4 to 40 alphabets only.
User cannot enter any value in Sales Price field (Set
‘Enabled’ property of TextBox Control).

54
Design View of Practice Exercise
Design View of Practice Exercise

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

56
Bibliography
 ASP:CustomValidator: http://msdn.microsoft.com/en-
us/library/9eee01cx(v=VS.71).aspx
 ASP:RegularExpressionValidator:
http://msdn.microsoft.com/en-
us/library/eahwtc9e(v=VS.71).aspx
 ASP:RequiredFieldValidator: http://msdn.microsoft.com/en-
us/library/5hbw267h(v=VS.71).aspx
 ASP:RangeValidator: http://msdn.microsoft.com/en-
us/library/f70d09xt(v=VS.71).aspx
 ASP:CompareValidator: http://msdn.microsoft.com/en-
us/library/db330ayw(v=VS.71).aspx

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.

Project1 CS

Recommended

More Related Content

Similar to Project1 CS (20)

More from sunmitraeducation (20)

Recently uploaded (20)

Project1 CS