Introduction to ASP.

net Validation Controls

 Validation is an important concept to get a correct output as the user gives the input to web
form must be in proper format then only the server will result in meaningful output.
 Data entered by the user must perform validation before sending to the server for processing.

Definition
“Validation is checking whether the user has entered correct data or input or not and then process the
request and send it to the server for output.”

Note
Validation can be performed at the client-side as well as server-side.

 Client-side validation makes the process fast as there is less number of hits to the server.
 Server-side validation is used to remove the limitation of client browsers dependencies and
scripting language support.

Types of Validation
Validation can be classified into two types based on client and server validation:

1. Client side Validation

2. Server side Validation

1. Client side Validation

 Validations performed at Client-Side i.e., browser.

  User gets information immediately as validation performed before a request is sent to the
server.

2. Server-side Validation

 Server-side validation takes place before data processing in the database.

 This type of validation is used, where client browser dependencies are involved.

Hierarchy Model of ASP.NET Validation controls

 All the ASP.NET Validation controls derive from the WebControl class.
 The WebControl class derive from System.Web.UI.Control, which itself derives
from System.Object.

 ASP.NET validation controls are derived from the abstract class i.e., BaseValidator Class,
which is derived from Label Control class.

BaseValidator Class
BaseValidator class is parent for all ASP.NET validation controls.
It is abstract class means we cannot directly instantiate BaseValidator.
All ASP.NET Validation controls inherit methods and properties of BaseValidator class.
Some common and essential properties provided by the BaseValidator Control class are as follows:
Properties Description

ControlToValidate Which control to be validate.

Display A Mode in which error message is shown like static, dynamic, none.

ErrorMessage Error message to be displayed.

Text If validation fails, the message to be shown.

 SetFocusOnError Focus is set to the control having incorrect values
Note

 Property named ControlToValidate cannot be left blank.

 Multiple validation controls can be assigned to a webform input control.
 CauseValidation property of the control must be “true” only then server validation will take
place.

Validation Controls used in ASP.NET

The Validation controls used in APS.NET Web Form are as follows:

1. ValidationSummary
2. RequiredFieldValidator
3. RangeValidator
4. CompareValidator
5. RegularExpressionValidator
6. CustomValidator

Validation Controls can be used at the client-side as well as server-side.

1. ValidationSummary Control :
2. ValidationSummary Control is used tosummarize all the error message at one place in the list,
bullet, or single message form.
3. Some important properties of ValidationSummary Control
are DisplayMode, ShowMessageBox, ShowSummary,
4. RequiredFieldValidator Control:

 Control used to make web form input control required i.e. it cannot be left empty.
 User will have to enter some input without which form will not be transferred to the server.

Code for aspx page

<h1>ASP.NET Validation Controls</h1>

<asp:ValidationSummary ID="ValidationSummary1" runat="server" />

<p>

First Name :

<asp:TextBox ID="txtFirstName" runat="server" CausesValidation="True">

</asp:TextBox>

<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server"

ErrorMessage="Please Provide First Name" ControlToValidate="txtFirstName"> Required

</asp:RequiredFieldValidator>
</p>

<p>

Last Name:

<asp:TextBox ID="txtLastName" runat="server">

</asp:TextBox>

<asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" ErrorMessage="Please

Provide Last Name" ControlToValidate="txtLastName"> Required

</asp:RequiredFieldValidator>

</p>

<p>

<asp:Button ID="Button1" runat="server" Text="Submit" />

</p>

Note
InitialValue : The property of RequiredFieldValidation control will check in the associated control
to validate whether the value is same as InitialValue or not. If a value matches to IntitalValue, it is
invalid, value other than InitialValue is Valid.

 RangeValidator Control
 RangeValidator Control is used to apply some upper and lower limit for associated input
control.
 Value in input control is checked with Maximum and Minimum property values.
 Type property of RangeValidator Control defines which type of comparison takes place.

<tr>
 <td style="height: 25px">Age:</td>

<td style="height: 25px">

<asp:TextBox ID="txtAge" runat="server"></asp:TextBox>

<asp:RangeValidator ID="RangeValidator1" runat="server" ErrorMessage="Age must

be between 18 and 50 " ControlToValidate="txtAge" MaximumValue="50" MinimumValue="18"
Type="Integer">

</asp:RangeValidator>

</td>

</tr>

 CompareValidator Control

 CompareValidator is used to compare some value of control with some constant value or any
value within different control.
 When we have to compare the value of one input control to others, we need to provide value
for CotrolToCompare property.
 If the value is to be compared with some constant, ValueToCompare must be given.

Some important properties of CompareValidator are ControlToCompare , ControlToValidate ,

Type , Operator ,Display etc.
<tr>

<td>Password:</td>

<td>
<asp:TextBox ID="txtPassword" runat="server"></asp:TextBox>

</td>

</tr>

<tr>

<td style="height: 25px">Confirm Password:</td>

<td style="height: 25px">

<asp:TextBox ID="txtConfirmtxtPassword" runat="server">

</asp:TextBox>

<asp:CompareValidator ID="CompareValidator1" runat="server"

ErrorMessage="Please ensure the password and confirm password is same"
ControlToValidate="txtConfirmtxtPassword" ControlToCompare="txtPassword">*

</asp:CompareValidator>

</td>

</tr>

 RegularExpressionValidator Control
 RegularExpression Validator is used when the input from the user is in
a standard pattern, and that pattern must be followed to prevent wrong entry to the database.
 The pattern specified in ValidationExpression property is validated then only process
proceeds.
<tr>

<td>Email ID

</td>

<td>

<asp:TextBox ID="txtEmail" runat="server"></asp:TextBox>

<asp:RegularExpressionValidator ID="RegularExpressionValidator1"
ValidationExpression="\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*" runat="server"
ErrorMessage="Please enter valid email" ControlToValidate="txtEmail">

</asp:RegularExpressionValidator>

</td>

</tr>

Frequently used Currency formats:

To validate a positive currency. Example(1.00) \d+(\.\d\d)?$

To validate a positive or negative currency. Example (1.20) ^(-)?\d+(\.\d\d)?$

Frequently used string formats:

To validate only characters ^[a-zA-Z]*$

To validate character or numbers and character only, not space, not special
^[a-zA-Z0-9]*$
character. Example :-Rajpal123
 ([a-zA-Z0-9\s])
To validate min 8 and max 20 character with spaces. Example :- ram 234
{8,20}

Frequently used Number Formats:

^[-+]?[0-9]*\.?[0-
To validate Float number with + Or – Symbol. Example 1.222 Or -1.222
9]*$

To validate user can input only number but no limit. Example :-

^(\d+)?$
125465896

To validate only three digit. Example:- 123 ^(\d\d\d)?$

Some File uploader Regular expression Formats:

To validate format for file
uploading Example:- ^(([a-zA-Z]:)|(\\{2}\w+)\$?)(\\(\w[\w].*))+
abc.jpg (.gif|.GIF|.jpg|.JPG|.jpeg|.JPEG)$

5. CustomValidator Control
CustomValidator is used when the validation is performed to match the user’s defined standards.
CustomValidator allows you to perform validation from both the client-side as well as server-side.
<tr>

<td>Message</td>

<td>

<asp:TextBox ID="txtMessage" runat="server"></asp:TextBox>

<asp:CustomValidator ID="CustomValidator1" runat="server" ErrorMessage="Text

must be exactly 10 characters long!" ControlToValidate="txtMessage"
OnServerValidate="CustomValidator1_ServerValidate"></asp:CustomValidator>

</td>

</tr>

protected void CustomValidator1_ServerValidate(object source, ServerValidateEventArgs args)

if (args.Value.Length == 10)

args.IsValid = true;

else
 args.IsValid = false;

Navigation control
Navigation controls are very important for websites.Navigation controls are
basically used to navigate the user through webpage .It is more helpful for making
the navigation of pages easier .There are three controls in ASP.NET ,Which are
used for Navigation on the webpage.
1. TreeView control
2. Menu Control
3. SiteMapPath control
There are some Namespaces, which are used for above Navigation controls which
are given below:
Using.System.Web.UI.WebControls.TreeView ;
Using.System.Web.UI.WebControls.Menu ;
Using.System.Web.UI.WebControls.SiteMapPath ;

1. ) The TreeView Control:-

The TreeView control is used for logically displaying the data in a hierarchical
structure.We can use this navigation control for displaying the files and folders on
the webpage.W can easily display the XML document,Web.SiteMap files and
Database records in a tree structure.
There are some types to generate navigation on webpage
through TreeView control.
1. TreeView Node Editor dialog box
2. Generate TreeView based on XML Data
3. Generate TreeView based on Web.SiteMap data
 4. Generate TreeView from Database.
1.1) TreeView Node Editor Dialog Box:-
There are some steps to generate the Tree structure on the page,which are given
below:
Step 1: First open your visual studio-->File-->New-->Website-->Select ASP.NET
Empty Website -->OK-->open solution explorer-->Add New Web Form-->Drag and
Drop TreeView control from Toolbox as sown below:

Step 2: Now go properties of TreeView control-->Click Nodes-->Add Root and

child Node as shown below:

Step 3: Now Run the Program(press F5).

output:
1.2 ) Generate TreeView Based On XML Data:-
There Are Some Steps To Implement This Concepts On The
Webpage,Which Are Given Below:
Step 1: Now First Add A Web Form And A XML File In Your Solution
Explorer-->Now Open The XML File And Write The Following Codes As
Shown Below-->Now Click Save.
<?xml version="1.0" encoding="utf-8" ?>
<application>
<homepage title="Country" value="default.aspx">
<page title ="INDIA" value="default.aspx">
<subpage title ="up" value="default.aspx"/>
<subpage title ="delhi" value="default.aspx"/>
<subpage title ="mumbai" value="default.aspx"/>
<subpage title ="kolkata" value="default.aspx"/>
</page>
<page title ="US" value="default.aspx"/>
<page title ="CHNIA" value="default.aspx"/>
<page title ="JAPAN" value="default.aspx"/>
</homepage>
</application>

Step 2:Now Drag and drop TreeView control on the Web Form --> Now Choose
Data Source from TreeView control-->Select New data source as shown below:

Step 3:Now select XML File as shown below:-->OK.

Step 4: Now Browse your XML File as shown below-->OK

Step 5: Now click Edit TreeNode DataBindings..-->Select each page one by one
-->and click Add button -->set TextField =title from right side for each page--
>click Apply as sown below:

Step 6: Now Run the program(press F5).

Output:
1.3 ) Generate TreeView Based On Sitemap Data:-
Step 1: First Add a Web Form and a SiteMap in Solution Explorer as shown
below-->Add

Step 2: Open web.sitemap file and write the following codes.which are given
below-->Save

<?xml version="1.0" encoding="utf-8" ?>

<siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" >
<siteMapNode url="default.aspx" title="Contury" description="">

<siteMapNode url="treeview1.aspx" title="India" description="" />

<siteMapNode url="menu.aspx" title="Us" description="" />

<siteMapNode url="menu1.aspx" title="China" description="" />
</siteMapNode>

</siteMap>

Step 3: Now drag and drop TreeView control on the Form-->Now choose Data
Source-->select New data source-->Select SiteMap as sown below:
Step 4:Now click OK Button ,you will see following output.

Step 5: Now Run the program(press F5).

OUTPUT:

2. ) The Menu Control:-

The menu control is a Navigation control,which is used to display the site navigation
information .This can be used to display the site data structure vertically
and horizontally.It can be used a binding control as TreeView control.Means we
can easily bind the XML and SiteMap data in menu control.
The menu control can be used as two types.
  Static menu:- It is used to display the parent menu items and their sub
menu items on the page.Means it is used to display the entire structure of
the static menu.
 Dynamic menu:- It is used to display the static menu as well as dynamic
menu on the site.it Means when user passes the mouse over
the menu then it will appear on the site.
2.1 ) Static Menu:-
We can display site structure vertically as well as horizontally through static menu
control on the site.There are some steps to implement the static menu control on
the Web Form.Which are given below:Step 1: First Add a New Web Form in
solution Explorer -->drag and drop menu control on the Form-->now select Views
= static as shown below:

Step 2: Now click Edit Menu Items...-->Add parent and child nodes as shown
below:

Step 3: Now Run the program(press F5).

Output:-
Note:- You can implement the vertical orientation as horizontal orientation.

2.2 ) Dynamic Menu:-

When user passes the mouse over the control ,the data will automatically appear on
the site.we can generate dynamic menu control in two ways:
 Generate menu control using Xml Data source
 Generate menu control using SiteMap Data source
There are some steps to implement this concepts on the site.which are given below:-

Step 1: First Add a Web Form in the solution Explorer-->Drag and drop menu
control on the Form -->choose Data Source -->Select XML File-->OK--
>Browse XML File-->OK.

Step 2: Now click Edit TreeNode DataBindings..-->Select each page one by one
-->and click Add button -->set TextField =title from right side for each page--
>click Apply as sown below:

Step 3: Now Run the program(press F5).

Output:-

Note:- We can use same process for SiteMap File also.

3. ) The SiteMapPath Control:

The SiteMapPath control is also used to display the Navigation information on the
site.It display the current page's context within the entire structure of a website.
There are some steps to implement the SiteMapPath control on the web page.Which
are given below:

Step 1: First open your visual studio -->File -->New-->Website-->Select ASP.NET

Empty Website-->Open solution Explorer-->Add a Web Form (SiteMap.aspx)--
>Now again Add Site Map File in solution Explorer-->open web.sitmap file--
>write the following codes , which are given below:

<?xml version="1.0" encoding="utf-8" ?>

<siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" >
<siteMapNode url="SiteMap.aspx" title="Country" description="">
<siteMapNode url="page1.aspx" title="India" description="" />
<siteMapNode url="page2.aspx" title="China" description="" />
<siteMapNode url="page3.aspx" title="US" description="" />
 </siteMapNode>

</siteMap>

Step 2:Now drag and drop SiteMapPath control on the web Form
(SiteMap.aspx)-->Now drag and drop HyperLink control on the Form as shown
below:

Step 3: Now Add three more Web Form (page1.aspx ,page2.aspx, page3.aspx) in
Solution Explorer-->Go properties of HyperLink Button control --
>set NavigateUrl-->Write Text Information ,as shown below:

Step 4: Now Go page1.aspx -->drag and drop SiteMapPath control and

HyperLink control on the Form as shown below-->Set the NavigateUrl of
each HyperLink control as previous i have done.

Step 5: Now Go page2.aspx -->Same steps perform as step 4.

Step 6: Now Go page3.aspx -->Same steps perform as step 4 and step 5.

Step 7: Now Run the program(press F5).

Output:-