Introduction : A Validation server
control is used to validate the data of an input control. If the data does not
pass validation,it will display an error message to the user. ASP.NET
validation controls greatly improve the perfomance of a web application and may
be used by WebDeveloper to reduce plenty of code that they used to write
previously to validate input values using javascript or vbscript. ASP.NET
validation control improve the performance of a web application and validate
input value.
Types of Validation :
- Required FieldValidator.
- RegularExpressionValidator.
- CompareValidator.
- RangeValidator.
- CustomValidator.
- Validation Summary.
Note : In this article we use a
RequiredFieldValidator. In the Validator control make sure that the input box is
not left to blank. The RequiredFieldValidator control is used to make an input
control a required field. In this control the validation fails. then input
value does not change from its initial value. By default, the initial value is
an empty string.
Step 1 : Open Visual Studio 2010.
- Go to File-> New-> WebSite.
- Select ASP.NET WebSite.
![asp1.gif]()
Step 2 : Go to Solution Explorer and
right-click.
- Select Add->New Item.
- Select WebForm.
- Default.aspx page open.
![webform.gif]()
Step 3 : Now drag and drop controls from
Toolbox.
- Drag ScriptManager, UpdatePanel,
Button,Label, TextBox, RegularExpressionValidator.
![reg3.gif]()
Step 4 : Go to Default.aspx page and
click in Design option.
- Go to Property window and define the
property and set the value.
- Define the UpdatePanel property.
Step 5 : Go to Design Option and select
Button.
- Right-click in Button and define the
text and event property.
- In the text property define text value
name Submit.
Step 6 : Define the CSS code.
Code :
<style
type="text/css">
.style1
{
height:
404px;
width: 978px;
}
.style2
{
z-index: 1;
left: 94px;
top: -12px;
position:
relative;
right: -94px;
}
.style3
{
z-index: 1;
left: 226px;
top: 236px;
position:
absolute;
}
.style4
{
}
.style5
{
position:
absolute;
z-index: 1;
left: 8px;
top: 93px;
}
.style6
{
z-index: 1;
top: 89px;
position:
absolute;
left: 98px;
right: 772px;
}
.style7
{
z-index: 1;
left: 229px;
top: 108px;
position:
absolute;
}
.style8
{
z-index: 1;
left: 111px;
top: 322px;
position:
absolute;
}
.style9
{
z-index: 1;
left: 99px;
top: 136px;
position:
absolute;
}
.style10
{
z-index: 1;
left: 223px;
top: 149px;
position:
absolute;
}
</style>
Step 7 : Go to Default.aspx page and
click in Source option and Write the below code.
Code :
<body>
<form
id="form1"
runat="server">
<asp:ScriptManager
ID="ScriptManager1"
runat="server">
</asp:ScriptManager>
<div
class="style1"
style="z-index:
1; position:
relative; background-color:
#000000; left:
20px; top: 30px;
color: #FFFFFF;"/>
<h1>
MY AJAX APPLICATION</h1>
<br
/>
<br
/>
<asp:UpdatePanel
ID="UpdatePanel1"
runat="server">
<ContentTemplate>
<asp:Label
ID="Label1"
runat="server"
Text="Name"
CssClass="style5"
BorderColor="#993300"></asp:Label>
<asp:TextBox
ID="txtname"
runat="server"
Width="100px"
CssClass="style6"
ontextchanged="txtname_KeyPress"></asp:TextBox>
<asp:RequiredFieldValidator
ID="RequiredFieldValidator1"
runat="server"
ControlToValidate="txtname"
ErrorMessage="*
Please enter your name" ForeColor="Lime"
CssClass="style7">*
Please enter your name</asp:RequiredFieldValidator>
<asp:TextBox
ID="txtPhoneNumber"
runat="server"
Width="100px"
CssClass="style9"></asp:TextBox>
<br
/>
<br
/>
<asp:Label
ID="Label2"
runat="server"
Text="Phone Number"></asp:Label>
<asp:RequiredFieldValidator
ID="RequiredFieldValidator3"
runat="server"
ControlToValidate="txtPhoneNumber"
ErrorMessage="*
Please enter your Phone Number"
ForeColor="#CC00FF"
CssClass="style10">*
Please enter your
Phone Number</asp:RequiredFieldValidator>
<br
/>
<br
/>
<br
/>
<span
class="style4"
style="height:
20px; ">Address <asp:RequiredFieldValidator
ID="RequiredFieldValidator2"
runat="server"
ControlToValidate="txtPhoneNumber"
ErrorMessage="*
Please enter your Address"
CssClass="style3">*
Please enter your
Address</asp:RequiredFieldValidator>
</span>
<br
/>
<asp:TextBox
ID="txtaddress"
runat="server"
Height="80px"
Width="100px"
CssClass="style2"></asp:TextBox>
<br
/>
<br
/>
<br
/>
<br
/
<asp:Button
ID="btnSubmit"
runat="server"
OnClick="Button1_Click"
Text="Submit"
Width="68px"
BackColor="#999999"
CssClass="style8"
/>
<br
/>
<br
/>
<br
/>
<br
/>
<br
/>
<br
/>
<br
/>
<br
/>
<br
/>
<br
/>
<br
/>
<br
/>
<br
/>
</div>
</ContentTemplate>
</asp:UpdatePanel>
Step 8 : Define ScriptManagerControl for
the execution of Ajax control and set the property and id value.
Step 9 : We can use Valuators outside of
UpdatePanel should be use the script registration methods of the
ClientScriptManager control.
Step 10 : Now press F5 and run the
application.
![reg9.gif]()
Step 11: When we click in Submit Button
without fill the TextField value the see the following message will show.
![reg10.gif]()
Step 12 : Now we define all Text Filed
value and show the particular information for Validator Control.
![REG11.gif]()