Using Validation Control in AJAX

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.

Step 2 : Go to Solution Explorer and right-click.

Select Add->New Item.
Select WebForm.
Default.aspx page open.

Step 3 : Now drag and drop controls from Toolbox.

Drag ScriptManager, UpdatePanel, Button,Label, TextBox, RegularExpressionValidator.

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.

Step 11: When we click in Submit Button without fill the TextField value the see the following message will show.

Step 12 : Now we define all Text Filed value and show the particular information for Validator Control.

Using Validation Control in AJAX

Reactions

1 Comment