New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

Validation

Both text boxes are required
Name
E-mail



  • Validation mode Configurator
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 must 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:
PrivateSubRegisterButton_Click(sender AsObject, e AsSystem.EventArgs) HandlesRegisterButton.Click
    ...
        IfRadioButtonList1.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
            DimupdatedControl1 AsNewAjaxUpdatedControl()
            updatedControl1.ControlID = Panel1.ClientID
            RadAjaxManager1.AjaxSettings(0).UpdatedControls.Add()
    (updatedControl1)
            DimupdatedControl2 AsNewAjaxUpdatedControl()
            updatedControl2.ControlID = Panel2.ClientID
            RadAjaxManager1.AjaxSettings(0).UpdatedControls.Add()
    (updatedControl2)
            DimupdatedControl3 AsNewAjaxUpdatedControl()
            updatedControl3.ControlID = Panel3.ClientID
            RadAjaxManager1.AjaxSettings(0).UpdatedControls.Add()
    (updatedControl3)
        EndIf
    EndSub
  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • styles.css
<%@ Page Language="c#" CodeFile="DefaultCS.aspx.cs" AutoEventWireup="false" Inherits="Telerik.AjaxManager.Functionality.Validation.DefaultCS" %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <link href="styles.css" rel="Stylesheet" type="text/css" />
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <div class="demo-container size-custom">
        <telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server" LoadingPanelID="LoadingPanel1">
            <div class="contentWrapper">
                <div class="contentRow">
                    <span id="info" class="blockText">Both text boxes are required</span>
                </div>
                <div class="contentRow">
                    <span class="label blockText">Name</span>
                    <telerik:RadTextBox RenderMode="Lightweight" ID="tbName" TabIndex="1" runat="server">
                    </telerik:RadTextBox>
                    <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="tbName"
                        ErrorMessage="Name is required.">*</asp:RequiredFieldValidator>
                </div>
                <div class="contentRow">
                    <span class="label blockText">E-mail</span>
                    <telerik:RadTextBox RenderMode="Lightweight" ID="tbEmail" TabIndex="2" runat="server">
                    </telerik:RadTextBox>
                    <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>
                </div>
                <div class="contentRow buttonRow">
                    <telerik:RadButton RenderMode="Lightweight" ID="RegisterButton" runat="server" Text="Register" OnClick="RegisterButton_Click" CssClass="registerBtn"></telerik:RadButton>
                </div>
                <br />
                <br />
                <div class="contentRow">
                    <asp:Label ID="Label3" runat="server"></asp:Label>
                    <br />
                    <asp:Label ID="Label4" runat="server"></asp:Label>
                </div>
                <div class="contentRow">
                    <asp:ValidationSummary ID="ValidationSummary1" runat="server" Width="200px" BorderColor="Red" CssClass="validationSummary"
                        BorderWidth="1px" HeaderText="List of errors"></asp:ValidationSummary>
                </div>
            </div>
        </telerik:RadAjaxPanel>

        <telerik:RadAjaxLoadingPanel ID="LoadingPanel1" runat="server" MinDisplayTime="300">
        </telerik:RadAjaxLoadingPanel>
    </div>
    <qsf:ConfiguratorPanel runat="server" ID="ConfigurationPanel1" Title="Validation mode Configurator" Expanded="true">
        <Views>
            <qsf:View>
                <qsf:RadioButtonList ID="RadioButtonList1" runat="server" Width="238px" Height="53px" AutoPostBack="True" OnSelectedIndexChanged="RadioButtonList1_SelectedIndexChanged">
                    <asp:ListItem Value="ClientSide Validation" Selected="True">Client-side</asp:ListItem>
                    <asp:ListItem Value="ServerSide Validation">Server-side</asp:ListItem>
                </qsf:RadioButtonList>
            </qsf:View>
        </Views>
    </qsf:ConfiguratorPanel>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance