ARTICLE

Using Validation Control in AJAX

Posted by Davin Martyn in Articles | AJAX in C# on December 03, 2011

Tags: AJAX, AJAX Articles, Validation Control, Validation Control in AJAX

The RequiredFieldValidator control is used to make an input control a required field. In this control, if the validation fails then the input value does not change from its initial value.

Reader Level: Beginner

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>