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

Validation

Registration form
Name:
Age:
Phone:
Email
Hire Date:




RadInput supports client and server-side ASP.NET validation. This example shows how to use RequiredFieldValidator, RangeValidator and RegularExpressionValudator with RadNumericTextBox, RadTextBox, RadDateInput and RadMaskedTextBox. All you need to do is set the ControlToValidate property of your validator to point to the respective input instance.

Type some data in the input controls then press the submit button. ASP.NET validation would fail in case of invalid or missing data.

  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • styles.css
<%@ Page Language="c#" CodeFile="DefaultCS.aspx.cs" AutoEventWireup="false" Inherits="Telerik.InputExamplesCS.Common.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" />
    <telerik:RadFormDecorator RenderMode="Lightweight" ID="RadFormDecorator1" runat="server" DecorationZoneID="wrapper1" />
    <div id="wrapper1">
        <telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server" CssClass="demo-container size-narrow" LoadingPanelID="RadAjaxLoadingPanel1">
            <fieldset>
                <legend>Registration form</legend>
                <br />
                <table border="0" cellpadding="5">
                    <colgroup>
                        <col width="100" />
                        <col width="500" />
                    </colgroup>
                    <tr class="FormContainer">
                        <td>Name:
                        </td>
                        <td>
                            <telerik:RadTextBox RenderMode="Lightweight" ID="RadTextBox1" runat="server"></telerik:RadTextBox>
                            <asp:RequiredFieldValidator ID="TextBoxRequiredFieldValidator" runat="server" Display="Dynamic"
                                ControlToValidate="RadTextBox1" ErrorMessage="The textbox cannot be empty"></asp:RequiredFieldValidator>
                        </td>
                    </tr>
                    <tr class="FormContainer">
                        <td>Age:
                        </td>
                        <td>
                            <telerik:RadNumericTextBox RenderMode="Lightweight" ID="RadNumericTextBox1" runat="server" Type="Number" NumberFormat-DecimalDigits="0">
                            </telerik:RadNumericTextBox>
                            <asp:RequiredFieldValidator ID="NumercTextBoxRequiredFieldValidator" runat="server"
                                Display="Dynamic" ControlToValidate="RadNumericTextBox1" ErrorMessage="Please enter a number for age"></asp:RequiredFieldValidator>
                            <asp:RangeValidator ID="NumericTextBoxRangeValidator" runat="server" ControlToValidate="RadNumericTextBox1"
                                ErrorMessage="Age should be between 0 and 50" Display="Dynamic"
                                MaximumValue="50" MinimumValue="0" Type="Integer"></asp:RangeValidator>
                        </td>
                    </tr>
                    <tr class="FormContainer">
                        <td valign="top">Phone:
                        </td>
                        <td>
                            <telerik:RadMaskedTextBox RenderMode="Lightweight" ID="RadMaskedTextBox1" runat="server" Mask="(###)-######">
                            </telerik:RadMaskedTextBox>
                            <asp:RequiredFieldValidator Display="Dynamic" ID="MaskedTextBoxRequiredFieldValidator"
                                runat="server" ErrorMessage="Please enter a phone number" ControlToValidate="RadMaskedTextBox1"></asp:RequiredFieldValidator>
                            <asp:RegularExpressionValidator Display="Dynamic" ID="MaskedTextBoxRegularExpressionValidator"
                                runat="server" ErrorMessage="Format is (###)-######" ControlToValidate="RadMaskedTextBox1"
                                ValidationExpression="\(\d{3}\)-\d{6}"></asp:RegularExpressionValidator>
                        </td>
                    </tr>
                    <tr class="FormContainer">
                        <td valign="top">Email
                        </td>
                        <td>
                            <telerik:RadTextBox RenderMode="Lightweight" ID="Radtextbox2" runat="server"></telerik:RadTextBox>
                            <asp:RegularExpressionValidator ID="emailValidator" runat="server" Display="Dynamic"
                                ErrorMessage="Please enter valid e-mail address" ValidationExpression="^[\w\.\-]+@[a-zA-Z0-9\-]+(\.[a-zA-Z0-9\-]{1,})*(\.[a-zA-Z]{2,3}){1,2}$"
                                ControlToValidate="Radtextbox2">
                            </asp:RegularExpressionValidator>
                            <asp:RequiredFieldValidator ID="Requiredfieldvalidator1" runat="server" Display="Dynamic"
                                ControlToValidate="Radtextbox2" ErrorMessage="Please enter an e-mail"></asp:RequiredFieldValidator>
                        </td>
                    </tr>
                    <tr class="FormContainer">
                        <td>Hire&nbsp;Date:
                        </td>
                        <td>
                            <telerik:RadDateInput RenderMode="Lightweight" ID="RadDateInput1" runat="server" DateFormat="d" MinDate="01/01/1990"
                                MaxDate="01/01/3000">
                            </telerik:RadDateInput>
                            <asp:RangeValidator ID="DateInputRangeValidator" runat="server" ControlToValidate="RadDateInput1"
                                ErrorMessage="Choose a date between 5th of January 2005 and 1st of September 2005"
                                Display="Dynamic" MaximumValue="2005-09-01-00-00-00" MinimumValue="2005-01-05-00-00-00"></asp:RangeValidator>
                            <asp:RequiredFieldValidator ID="PickerRequiredFieldValidator" runat="server" Display="Dynamic"
                                ControlToValidate="RadDateInput1" ErrorMessage="Please select a date"></asp:RequiredFieldValidator>
                        </td>
                    </tr>
                </table>
                <br />
                <br />
                <asp:CheckBox OnCheckedChanged="CheckBox1_CheckedChanged" ID="CheckBox1" runat="server"
                    Text="  Client Side Validation" Checked="True" CssClass="CheckBox" AutoPostBack="True"></asp:CheckBox>
                <br />
                <br />
                <input type="submit" value="Postback" runat="server" />
                <input type="reset" value="Reset" />
            </fieldset>
        </telerik:RadAjaxPanel>
    </div>
    <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server"></telerik:RadAjaxLoadingPanel>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance