Input - Validation

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




Isolate this demo as a stand-alone application

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.

<%@ 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 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">
    <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 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 ID="RadTextBox1" runat="server"></telerik:RadTextBox>
                            <asp:RequiredFieldValidator ID="TextBoxRequiredFieldValidator" runat="server" Display="Dynamic"
                                ControlToValidate="RadTextBox1" ErrorMessage="The textbox can not be empty!"></asp:RequiredFieldValidator>
                        </td>
                    </tr>
                    <tr class="FormContainer">
                        <td>Age:
                        </td>
                        <td>
                            <telerik:RadNumericTextBox ID="RadNumericTextBox1" runat="server" Type="Number" NumberFormat-DecimalDigits="0">
                            </telerik:RadNumericTextBox>
                            <asp:RequiredFieldValidator ID="NumercTextBoxRequiredFieldValidator" runat="server"
                                Display="Dynamic" ControlToValidate="RadNumericTextBox1" ErrorMessage="Please, select an year number!"></asp:RequiredFieldValidator>
                            <asp:RangeValidator ID="NumericTextBoxRangeValidator" runat="server" ControlToValidate="RadNumericTextBox1"
                                ErrorMessage="Year number should be a non negative less than 50." Display="Dynamic"
                                MaximumValue="50" MinimumValue="0" Type="Integer"></asp:RangeValidator>
                        </td>
                    </tr>
                    <tr class="FormContainer">
                        <td valign="top">Phone:
                        </td>
                        <td>
                            <telerik:RadMaskedTextBox 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 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 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 />
                <telerik:RadButton runat="server" Text="Postback"></telerik:RadButton>
                <input type="reset" value="Reset" />
            </fieldset>
        </telerik:RadAjaxPanel>
    </div>
    <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server"></telerik:RadAjaxLoadingPanel>
    </form>
</body>
</html>

Find Assistance

Help Us Improve

Was this example helpful?