Telerik is a leading vendor of ASP.NET AJAX, ASP.NET MVC, Silverlight, WinForms and WPF controls and components, as well as .NET Reporting, .NET ORM , .NET CMS, Code Analysis, Mocking, Team Productivity and Automated Testing Tools. Building on its expertise in interface development and Microsoft technologies, Telerik helps customers build applications with unparalleled richness, responsiveness and interactivity. Telerik products help thousands of companies to be more productive and deliver reliable applications under budget and on time.
Version Q2 2011 released 07/12/2011
select

Ajax / Validation

Both TextBoxes are required:
Name:
E-mail:
Validation Mode

  • RadAjax controls fully support server and client-side validation.
    This example demonstrates how to achieve the desired functionality in a straightforward and simple way with the RadAjaxPanel control. You can also use the RadAjaxManager for the same purpose -- in order to use the server-side validation you would have to add the panels with the validator controls in the UpdatedControls collection for the Register Button:

    C# code:
    private void RegisterButton_Click(object sender, System.EventArgs e)
    {
    ...
    if (RadioButtonList1.SelectedIndex == 1) // Update the panels with validators only if server-side validation is performed.
    {
    // RadAjaxManager1.AjaxSettings[0] specifies the settings for Ajax requests initiated by the Register Button control
    AjaxUpdatedControl updatedControl1 = new AjaxUpdatedControl();
    updatedControl1.ControlID = Panel1.ClientID;
    RadAjaxManager1.AjaxSettings[0].UpdatedControls.Add(updatedControl1); AjaxUpdatedControl updatedControl2 = new AjaxUpdatedControl();
    updatedControl2.ControlID = Panel2.ClientID;
    RadAjaxManager1.AjaxSettings[0].UpdatedControls.Add(updatedControl2);
    AjaxUpdatedControl updatedControl3 = new AjaxUpdatedControl();
    	updatedControl3.ControlID = Panel3.ClientID;
    
    RadAjaxManager1.AjaxSettings[0].UpdatedControls.Add(updatedControl3);
    }
    }
    VB.NET code:
    Private Sub RegisterButton_Click (sender As Object, e As System.EventArgs)
    ...
    If RadioButtonList1.SelectedIndex = 1 Then ' Update the panels with validators only if server-side validation is performed.
    ' RadAjaxManager1.AjaxSettings(0) specifies the settings for Ajax requests initiated by the Register Button control
    Dim updatedControl1 As New AjaxUpdatedControl()
    updatedControl1.ControlID = Panel1.ClientID
    RadAjaxManager1.AjaxSettings(0).UpdatedControls.Add (updatedControl1)
    Dim updatedControl2 As New AjaxUpdatedControl()
    updatedControl2.ControlID = Panel2.ClientID
    RadAjaxManager1.AjaxSettings(0).UpdatedControls.Add (updatedControl2)
    Dim updatedControl3 As New AjaxUpdatedControl()
    updatedControl3.ControlID = Panel3.ClientID
    RadAjaxManager1.AjaxSettings(0).UpdatedControls.Add (updatedControl3)
    End If
    End Sub 'RegisterButton_Click

Source Code

C# VB.NET
Show code in new window Demo isolation steps
  • <%@ Page Language="c#" CodeFile="DefaultCS.aspx.cs" AutoEventWireup="false" Inherits="Telerik.AJAXExamplesCSharp.AJAX.Examples.Functionality.Validation.DefaultCS" %>

    <%@ Register TagPrefix="telerik" TagName="Header" Src="~/Common/Header.ascx" %>
    <%@ Register TagPrefix="telerik" TagName="HeadTag" Src="~/Common/HeadTag.ascx" %>
    <%@ Register TagPrefix="telerik" TagName="Footer" Src="~/Common/Footer.ascx" %>
    <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <telerik:HeadTag runat="server" ID="Headtag1"></telerik:HeadTag>
        <!-- custom head section -->
        <style type="text/css">
            .validationSummary LI
            {
                padding-right: 0px;
                padding-left: 0px;
                padding-bottom: 0px;
                margin: 0px;
                padding-top: 0px;
                list-style-type: none;
            }
            .validationSummary UL
            {
                padding-right: 0px;
                padding-left: 0px;
                padding-bottom: 0px;
                margin: 0px;
                padding-top: 0px;
            }
        </style>
        <!-- end of custom head section -->
    </head>
    <body class="BODY">
        <form runat="server" id="mainForm" method="post">
        <telerik:Header runat="server" ID="Header1" NavigationLanguage="CS"></telerik:Header>
        <!-- content start -->
        <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
        </telerik:RadScriptManager>
        <telerik:RadFormDecorator ID="RadFormDecorator1" runat="server" />
        <table cellspacing="0" cellpadding="0" width="90%" style="margin: 10px; padding-top: 10px;">
            <tr>
                <td style="width: 65%">
                    <div style="width: 360px">
                        <telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server" LoadingPanelID="LoadingPanel1">
                            <table cellspacing="0" cellpadding="3" width="100%">
                                <tr>
                                    <td>
                                    </td>
                                    <td colspan="2">
                                        <asp:Label ID="RequiredLabel" runat="server">Both TextBoxes are required:</asp:Label>
                                    </td>
                                </tr>
                                <tr valign="top">
                                    <td style="width: 25%">
                                        <asp:Label ID="Label1" runat="server">Name:</asp:Label>
                                    </td>
                                    <td style="width: 220px">
                                        <telerik:RadTextBox ID="tbName" TabIndex="1" runat="server" Width="200px">
                                        </telerik:RadTextBox>
                                    </td>
                                    <td>
                                        <asp:Panel ID="Panel1" runat="server" Width="25px">
    <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="tbName"
    ErrorMessage="Name is required.">*</asp:RequiredFieldValidator>

                                        </asp:Panel>
                                    </td>
                                </tr>
                                <tr>
                                    <td style="width: 25%">
                                        <asp:Label ID="Label2" runat="server">E-mail:</asp:Label>
                                    </td>
                                    <td style="width: 220px">
                                        <telerik:RadTextBox ID="tbEmail" TabIndex="2" runat="server" Width="200px">
                                        </telerik:RadTextBox>
                                    </td>
                                    <td>
                                        <asp:Panel ID="Panel2" runat="server" Width="25px">
    <asp:RegularExpressionValidator Display="Dynamic" ID="RegularExpressionValidator1" ValidationExpression="^[a-zA-Z][\w\.-]*[a-zA-Z0-9]@[a-zA-Z0-9][\w\.-]*[a-zA-Z0-9]\.[a-zA-Z][a-zA-Z\.]*[a-zA-Z]$"
    runat="server" ControlToValidate="tbEmail" ErrorMessage="Valid E-mail address is required.">*</asp:RegularExpressionValidator>

    <asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" ControlToValidate="tbEmail"
    ErrorMessage="E-mail is required.">*</asp:RequiredFieldValidator>

                                        </asp:Panel>
                                    </td>
                                </tr>
                                <tr>
                                    <td colspan="3">
                                        <asp:Label ID="Label3" Style="color: red" runat="server" Width="159px"></asp:Label>
                                        <asp:Label ID="Label4" Style="color: green" runat="server" Width="159px"></asp:Label>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                    </td>
                                    <td colspan="2">
                                        <asp:Button ID="RegisterButton" runat="server" Text="Register"></asp:Button>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                    </td>
                                    <td colspan="2">
                                        <asp:Panel ID="Panel3" runat="server">
    <asp:ValidationSummary ID="ValidationSummary1" runat="server" Width="174px" BorderColor="Red"
    BorderWidth="1px" HeaderText="List of errors" />

                                        </asp:Panel>
                                    </td>
                                </tr>
                            </table>
                        </telerik:RadAjaxPanel>
                    </div>
                </td>
                <td style="padding-right: 35px;">
                </td>
                <td valign="top">
                    <div style="font-weight: bold; margin-bottom: 5px; cursor: default; color: #333333;
                        border-bottom: #333333 1px solid">
                        Validation Mode</div>
    <asp:RadioButtonList ID="RadioButtonList1" runat="server" Width="238px" Height="53px"
    AutoPostBack="True">

                        <asp:ListItem Value="ClientSide Validation" Selected="True">Client-side</asp:ListItem>
                        <asp:ListItem Value="ServerSide Validation">Server-side</asp:ListItem>
                    </asp:RadioButtonList>
                </td>
            </tr>
        </table>
        <telerik:RadAjaxLoadingPanel ID="LoadingPanel1" runat="server" MinDisplayTime="300" />
        <!-- content end -->
        <telerik:Footer runat="server" ID="Footer1"></telerik:Footer>
        </form>
    </body>
    </html>

Get more than expected!

 
 

Take your time to truly experience the power of RadControls for ASP.NET AJAX with a free 60-day trial backed up by Telerik’s unlimited dedicated support.

Download your RadControls for ASP.NET AJAX trial and jumpstart your development with the available Getting Started resources.

If you have any questions, do not hesitate to contact us at sales@telerik.com.

Copyright 2002-2024 © Telerik. All right reserved
Telerik Inc, 201 Jones Rd, Waltham, MA 02451