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

Validation

ID: 289
Last Name: 66
First Name: 66
Hire date: 4/6/2024 12:00:00 AM
Country: 66
Phone: 6

The DataForm control provides validation capabilities to the form elements when editing and inserting records. Data Validation enables you to take a complete control of the data entered in the fields of the data form.

This example demonstrates how the input in the Insert and Edit form can be validated by using asp validator controls.

Simply edit or insert an item in the DataForm. When submitting an item with missing fields or incorrect information the validation will trigger.

  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • scripts.js
  • styles.css
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits="Telerik.DataFormExamples.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>
    <meta name="format-detection" content="telephone=no"/>
    <link href="styles.css" rel="stylesheet" />
    <script src="scripts.js"></script>
</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" Width="422px">
            <telerik:RadDataForm RenderMode="Lightweight" runat="server" InsertItemPosition="FirstItem" ID="RadDataForm1" DataSourceID="EntityDataSourceCustomers"
                DataKeyNames="EmployeeID" DataSourceCount="0" OnPreRender="RadDataForm1_PreRender">

                <LayoutTemplate>
                    <div class="RadDataForm RadDataForm_<%# Container.Skin %> rdfLeftAligned rdfNoFieldHint">
                        <div id="itemPlaceholder" runat="server">
                        </div>
                        <telerik:RadDataPager RenderMode="Lightweight" ID="RadDataPager1" runat="server" PagedControlID="RadDataForm1">
                            <Fields>
                                <telerik:RadDataPagerButtonField FieldType="FirstPrev" />
                                <telerik:RadDataPagerButtonField FieldType="NextLast" />
                                <telerik:RadDataPagerTemplatePageField>
                                    <PagerTemplate>
                                        <div>
                                            <label>
                                                Contact <strong>
                                                    <%#Container.Owner.StartRowIndex+1%></strong> of <strong>
                                                        <%# Container.Owner.TotalRowCount%></strong></label>
                                        </div>
                                    </PagerTemplate>
                                </telerik:RadDataPagerTemplatePageField>
                            </Fields>
                        </telerik:RadDataPager>
                    </div>
                </LayoutTemplate>
                <ItemTemplate>
                    <fieldset class="rdfFieldset rdfBorders">
                        <legend class="rdfLegend">ID:
                        <%#Eval("EmployeeID")%></legend>
                        <div class="rdfRow">
                            <asp:Label runat="server" ID="LastNameLabel" CssClass="rdfLabel rdfBlock" Text="Last Name:"></asp:Label>
                            <asp:Label CssClass="rdfFieldValue" Text='<%# Eval("LastName") %>' runat="server"
                                ID="LastNameLabel1" />
                        </div>
                        <div class="rdfRow">
                            <asp:Label runat="server" ID="FirstNameLabel" CssClass="rdfLabel rdfBlock" Text="First Name:"></asp:Label>
                            <asp:Label CssClass="rdfFieldValue" Text='<%# Eval("FirstName") %>' runat="server"
                                ID="FirstNameLabel1" />
                        </div>
                        <div class="rdfRow">
                            <asp:Label runat="server" ID="HireDateLabel" CssClass="rdfLabel rdfBlock" Text="Hire date:"></asp:Label>
                            <asp:Label CssClass="rdfFieldValue" Text='<%# Eval("HireDate") %>' runat="server"
                                ID="HireDateLabel1" />
                        </div>
                        <div class="rdfRow">
                            <asp:Label runat="server" ID="UnitPriceLabel2" CssClass="rdfLabel rdfBlock" Text="Country:"></asp:Label>
                            <asp:Label CssClass="rdfFieldValue" Text='<%# Eval("Country") %>' runat="server"
                                ID="UnitPriceLabel1" />
                        </div>
                        <div class="rdfRow">
                            <asp:Label runat="server" ID="HomePhoneLabel" CssClass="rdfLabel rdfBlock" Text="Phone:"></asp:Label>
                            <asp:Label CssClass="rdfFieldValue" Text='<%# Eval("HomePhone") %>' runat="server"
                                ID="HomePhoneLabel1" />
                        </div>
                        <div class="rdfCommandButtons">
                            <hr class="rdfHr" />
                            <telerik:RadButton RenderMode="Lightweight" ID="InitInsertButton" runat="server" ButtonType="SkinnedButton"
                                CausesValidation="False" CommandName="InitInsert" Text="Insert" ToolTip="Insert" />
                            <telerik:RadButton RenderMode="Lightweight" ID="EditButton" runat="server" ButtonType="SkinnedButton" CausesValidation="False"
                                CommandName="Edit" Text="Edit" ToolTip="Edit" />
                            <telerik:RadButton RenderMode="Lightweight" ID="DeleteButton" runat="server" ButtonType="SkinnedButton" CausesValidation="False"
                                CommandName="Delete" Text="Delete" ToolTip="Delete" />
                        </div>
                    </fieldset>
                </ItemTemplate>
                <EditItemTemplate>
                    <fieldset class="rdfFieldset rdfBorders">
                        <legend class="rdfLegend">Edit</legend>
                        <div class="rdfRow">
                            <asp:Label ID="CustomerIDLabel2" runat="server" CssClass="rdfLabel rdfBlock" Text="Customer ID"></asp:Label>
                            <asp:Label ID="CustomerIDLabel1" runat="server" CssClass="rdfFieldValue" Text='<%# Eval("EmployeeID") %>' />
                        </div>
                        <div class="rdfRow">
                            <asp:Label ID="LastNameLabel2" runat="server" AssociatedControlID="LastNameTxt" CssClass="rdfLabel rdfBlock"
                                Text="Last Name"></asp:Label>
                            <span class="right">
                                <telerik:RadTextBox RenderMode="Lightweight" ID="LastNameTxt" ValidationGroup="Group1" runat="server" Text='<%# Bind("LastName") %>'
                                    WrapperCssClass="rdfInput" ClientEvents-OnBlur="ns.validate"/>

                                <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" Display="Dynamic"
                                    ValidationGroup="Group1" ControlToValidate="LastNameTxt" ForeColor="Red" ErrorMessage="Please, supply a last name!"
                                    CssClass="Validator"></asp:RequiredFieldValidator>
                            </span>

                        </div>
                        <div class="rdfRow">
                            <asp:Label ID="FirstNameLabel2" runat="server" AssociatedControlID="FirstNameTxt"
                                CssClass="rdfLabel rdfBlock" Text="First Name"></asp:Label>
                            <span class="right">
                                <telerik:RadTextBox RenderMode="Lightweight" ID="FirstNameTxt" runat="server" Text='<%# Bind("FirstName") %>'
                                    WrapperCssClass="rdfInput" ClientEvents-OnBlur="ns.validate"/>
                                <asp:RequiredFieldValidator ID="TextBoxRequiredFieldValidator" runat="server" Display="Dynamic"
                                    ValidationGroup="Group1" ControlToValidate="FirstNameTxt" ForeColor="Red" ErrorMessage="Please, supply a first name!"
                                    CssClass="Validator"></asp:RequiredFieldValidator>
                            </span>
                        </div>
                        <div class="rdfRow">
                            <asp:Label ID="HireDateLabel2" runat="server" AssociatedControlID="HireDatePckr"
                                CssClass="rdfLabel rdfBlock" Text="Hire Date"></asp:Label>
                            <span class="right">
                                <telerik:RadDatePicker RenderMode="Lightweight" ID="HireDatePckr" runat="server" SelectedDate='<%# Bind("HireDate") %>'
                                    CssClass="rdfPicker" DateInput-ValidationGroup="Group1" DateInput-ClientEvents-OnBlur="ns.validate"/>
                                <br />
                                <asp:RangeValidator ID="DateInputRangeValidator" runat="server" ControlToValidate="HireDatePckr"
                                    ValidationGroup="Group1" CssClass="Validator" ErrorMessage="Choose a date between 5th of January 1990 and 1st of September 2014"
                                    Display="Dynamic" MaximumValue="2014-09-01-00-00-00" MinimumValue="1990-01-05-00-00-00"></asp:RangeValidator>
                                <asp:RequiredFieldValidator ID="PickerRequiredFieldValidator" runat="server" Display="Dynamic"
                                    ValidationGroup="Group1" CssClass="Validator" ForeColor="Red" ControlToValidate="HireDatePckr"
                                    ErrorMessage="Please, select a date!"></asp:RequiredFieldValidator>
                            </span>
                        </div>
                        <div class="rdfRow">
                            <asp:Label ID="CountryLabel2" runat="server" AssociatedControlID="CountryTxt" CssClass="rdfLabel rdfBlock"
                                Text="Country"></asp:Label>
                            <span class="right">
                                <telerik:RadTextBox RenderMode="Lightweight" ID="CountryTxt" runat="server" Text='<%# Bind("Country") %>'
                                    WrapperCssClass="rdfInput" />
                            </span>
                        </div>
                        <div class="rdfRow">
                            <asp:Label ID="PhoneLabel2" runat="server" AssociatedControlID="PhoneMaskedTxt" CssClass="rdfLabel rdfBlock"
                                Text="Home Phone"></asp:Label>
                            <span class="right">
                                <telerik:RadMaskedTextBox RenderMode="Lightweight" ID="PhoneMaskedTxt" runat="server" Mask="(###) ###-####"
                                    RequireCompleteText="true" TextWithLiterals='<%# Bind("HomePhone") %>' WrapperCssClass="rdfInput"
                                    ValidationGroup="Group1" />
                                <asp:RequiredFieldValidator Display="Dynamic" ID="MaskedTextBoxRequiredFieldValidator"
                                    ValidationGroup="Group1" CssClass="Validator" ForeColor="Red" runat="server" ErrorMessage="Please, enter a full phone number."
                                    ControlToValidate="PhoneMaskedTxt"></asp:RequiredFieldValidator>
                            </span>
                        </div>
                        <div class="rdfCommandButtons">
                            <hr class="rdfHr" />
                            <telerik:RadButton RenderMode="Lightweight" ID="UpdateButton" runat="server" ValidationGroup="Group1" ButtonType="SkinnedButton"
                                CommandName="Update" Text="Update" ToolTip="Update" />
                            <telerik:RadButton RenderMode="Lightweight" ID="CancelButton" runat="server" ButtonType="SkinnedButton" CausesValidation="False"
                                CommandName="Cancel" Text="Cancel" ToolTip="Cancel" />
                        </div>
                    </fieldset>
                </EditItemTemplate>
                <InsertItemTemplate>
                    <fieldset class="rdfFieldset rdfBorders">
                        <legend class="rdfLegend">Insert</legend>
                        <div class="rdfRow">
                            <asp:Label ID="CustomerIDLabel2" runat="server" CssClass="rdfLabel rdfBlock" Text="Customer ID"></asp:Label>
                            <asp:Label ID="CustomerIDLabel1" runat="server" CssClass="rdfFieldValue" Text='<%# Eval("EmployeeID") %>' />
                        </div>
                        <div class="rdfRow">
                            <asp:Label ID="LastNameLabel2" runat="server" AssociatedControlID="LastNameTxt" CssClass="rdfLabel rdfBlock"
                                Text="Last Name"></asp:Label>
                            <span class="right">
                                <telerik:RadTextBox RenderMode="Lightweight" ID="LastNameTxt" ValidationGroup="Group1" runat="server"  Text='<%# Bind("LastName") %>'
                                    WrapperCssClass="rdfInput" ClientEvents-OnBlur="ns.validate"/>
                                
                                <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" Display="Dynamic" 
                                    ValidationGroup="Group1"  ControlToValidate="LastNameTxt" ForeColor="Red" ErrorMessage="Please, supply a last name!"
                                    CssClass="Validator"></asp:RequiredFieldValidator>
                            </span>

                        </div>
                        <div class="rdfRow">
                            <asp:Label ID="FirstNameLabel2" runat="server" AssociatedControlID="FirstNameTxt"
                                CssClass="rdfLabel rdfBlock" Text="First Name"></asp:Label>
                            <span class="right">
                                <telerik:RadTextBox RenderMode="Lightweight" ID="FirstNameTxt" runat="server" Text='<%# Bind("FirstName") %>'
                                    ClientEvents-OnBlur="ns.validate" WrapperCssClass="rdfInput" />
                                <asp:RequiredFieldValidator ID="TextBoxRequiredFieldValidator" runat="server" Display="Dynamic"
                                    ValidationGroup="Group1" ControlToValidate="FirstNameTxt" ForeColor="Red" ErrorMessage="Please, supply a first name!"
                                    CssClass="Validator"></asp:RequiredFieldValidator>
                            </span>
                        </div>
                        <div class="rdfRow">
                            <asp:Label ID="HireDateLabel2" runat="server" AssociatedControlID="HireDatePckr"
                                CssClass="rdfLabel rdfBlock" Text="Hire Date"></asp:Label>
                            <span class="right">
                                <telerik:RadDatePicker RenderMode="Lightweight" ID="HireDatePckr" runat="server" SelectedDate='<%# Bind("HireDate") %>'
                                    DateInput-ClientEvents-OnBlur="ns.validate" CssClass="rdfPicker" DateInput-ValidationGroup="Group1" />
                                <br />
                                <asp:RangeValidator ID="DateInputRangeValidator" runat="server" ControlToValidate="HireDatePckr"
                                    ValidationGroup="Group1" CssClass="Validator" ErrorMessage="Choose a date between 5th of January 1990 and 1st of September 2014"
                                    Display="Dynamic" MaximumValue="2014-09-01-00-00-00" MinimumValue="1990-01-05-00-00-00"></asp:RangeValidator>
                                <asp:RequiredFieldValidator ID="PickerRequiredFieldValidator" runat="server" Display="Dynamic"
                                    ValidationGroup="Group1" CssClass="Validator" ForeColor="Red" ControlToValidate="HireDatePckr"
                                    ErrorMessage="Please, select a date!"></asp:RequiredFieldValidator>
                            </span>
                        </div>
                        <div class="rdfRow">
                            <asp:Label ID="CountryLabel2" runat="server" AssociatedControlID="CountryTxt" CssClass="rdfLabel rdfBlock"
                                Text="Country"></asp:Label>
                            <span class="right">
                                <telerik:RadTextBox RenderMode="Lightweight" ID="CountryTxt" runat="server" Text='<%# Bind("Country") %>'
                                    WrapperCssClass="rdfInput" />
                            </span>
                        </div>
                        <div class="rdfRow">
                            <asp:Label ID="PhoneLabel2" runat="server" AssociatedControlID="PhoneMaskedTxt" CssClass="rdfLabel rdfBlock"
                                Text="Home Phone"></asp:Label>
                            <span class="right">
                                <telerik:RadMaskedTextBox RenderMode="Lightweight" ID="PhoneMaskedTxt" runat="server" Mask="(###) ###-####"
                                    RequireCompleteText="true" TextWithLiterals='<%# Bind("HomePhone") %>' WrapperCssClass="rdfInput" ValidationGroup="Group1" />
                                <asp:RequiredFieldValidator Display="Dynamic" ID="MaskedTextBoxRequiredFieldValidator"
                                    ValidationGroup="Group1" CssClass="Validator" ForeColor="Red" runat="server" ErrorMessage="Please, enter a full phone number."
                                    ControlToValidate="PhoneMaskedTxt"></asp:RequiredFieldValidator>
                            </span>
                        </div>
                        <div class="rdfCommandButtons">
                            <hr class="rdfHr" />
                            <telerik:RadButton RenderMode="Lightweight" ID="PerformInsertButton" runat="server" ButtonType="SkinnedButton"
                                CommandName="PerformInsert" Text="Insert" ValidationGroup="Group1" ToolTip="Insert" />
                            <telerik:RadButton RenderMode="Lightweight" ID="CancelButton" runat="server" ButtonType="SkinnedButton" CausesValidation="False"
                                CommandName="Cancel" Text="Cancel" ToolTip="Cancel" />
                        </div>
                    </fieldset>
                </InsertItemTemplate>
            </telerik:RadDataForm>
        </telerik:RadAjaxPanel>
    </div>
    <asp:EntityDataSource ID="EntityDataSourceCustomers" runat="server" ConnectionString="name=TelerikReadWriteEntities"
        DefaultContainerName="TelerikReadWriteEntities" EntitySetName="Employees_Northwind"
        EntityTypeFilter="Employees_Northwind" EnableDelete="True" EnableFlattening="False" EnableInsert="True" EnableUpdate="True">
    </asp:EntityDataSource>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance