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

    ASP.NET Validators Support

    Registration Form


    Please fill in your resume!



    RadEditor will usually be used as a replacement for the regular TextBox control which offers support for validators such as <asp:RequiredFieldValidator> and <asp:CustomValidator>. The example demonstrates how to attach <asp:RequiredFieldValidator> and <asp:CustomValidator> controls to RadEditor:

    <telerik:radeditor runat="server"ID="RadEditor1"></telerik:radeditor>

    <
    asp:RequiredFieldValidator ID="ResumeValidator" Runat="server"
        ControlToValidate
    ="RadEditor1"
        Display
    ="Static">Please fill in your RESUME!!!
    </asp:RequiredFieldValidator>

    <
    asp:CustomValidator runat="server" ID="CustomValidator1"ControlToValidate="RadEditor1" ClientValidationFunction="checkLength">* Your resume is too short. Its length should be at least 50 symbols.</asp:CustomValidator>  
    <script type="text/javascript">  
       
    var limitNum = 50;  
           
        function
    checkLength(sender, args)  
        {  
           
    //Note that sender is NOT the RadEditor. sender is the <span> of the validator. 
            //The content is contained in the args.Value variable     
           
    var editorText = args.Value
           
    args.IsValid = editorText.length > limitNum;  
       
    }  
    </script>

     

    Note: The CustomValidator tends to fire its ClientValidationFunction only if the textbox (or editor) it validates has some content. Thus, a RequiredFieldValidator is needed in addition to the custom validator so that the empty text case can be captured.

    • DefaultCS.aspx
    • DefaultCS.aspx.cs
    • scripts.js
    • styles.css
    <%@ Page Theme="Default" Language="C#" Debug="true" AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs"Inherits="Telerik.Web.Examples.Editor.Validators.DefaultCS"  %>
     
    <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
    <!DOCTYPE html>
    <head runat="server">
        <title>Telerik ASP.NET Example</title>
    <link href="../Common/styles.css" rel="stylesheet" type="text/css" />
        <link href="styles.css" rel="stylesheet" />
        <script src="scripts.js" type="text/javascript"></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-medium">
            <h3>Registration Form</h3>
            <div class="formRow">
                <label for="FirstBox" class="textLabel">
                    First Name:</label>
                <telerik:RadTextBox RenderMode="Lightweight" ID="FirstBox" runat="server" EmptyMessage="Please fill in first name" Width="170">
                </telerik:RadTextBox>
                <asp:RequiredFieldValidator ID="FirstValidator" runat="server" CssClass="validator"
                    ControlToValidate="FirstBox" Display="Dynamic"> * </asp:RequiredFieldValidator>
            </div>
            <div class="formRow">
                <label for="LastBox" class="textLabel">
                    Last Name:</label>
                <telerik:RadTextBox RenderMode="Lightweight" ID="LastBox" runat="server" EmptyMessage="Please fill in last name" Width="170">
                </telerik:RadTextBox>
                <asp:RequiredFieldValidator ID="LastValidator" runat="server" CssClass="validator"
                    ControlToValidate="LastBox" Display="Dynamic"> * </asp:RequiredFieldValidator>
            </div>
            <div class="formRow">
                <label for="ExperienceList" class="textLabel">
                    Skill Level:</label>
                <telerik:RadComboBox RenderMode="Lightweight" ID="ExperienceList" runat="server" Width="170">
                    <Items>
                        <telerik:RadComboBoxItem Text="No Experience" Value="No Experience" Selected="true"></telerik:RadComboBoxItem>
                        <telerik:RadComboBoxItem Text="Beginner" Value="Beginner"></telerik:RadComboBoxItem>
                        <telerik:RadComboBoxItem Text="Good" Value="Good"></telerik:RadComboBoxItem>
                        <telerik:RadComboBoxItem Text="Excellent" Value="Excellent"></telerik:RadComboBoxItem>
                    </Items>
                </telerik:RadComboBox>
            </div>
            <div class="formRow">
                <label for="AddressBox" class="textLabel">
                    Address:</label>
                <telerik:RadTextBox RenderMode="Lightweight" ID="AddressBox" runat="server" TextMode="MultiLine" Rows="5"
                    EmptyMessage="Please fill in your address" Width="170" Height="100">
                </telerik:RadTextBox>
                <asp:RequiredFieldValidator ID="AddressValidator" runat="server" CssClass="validator"
                    ControlToValidate="AddressBox" Display="Dynamic"> * </asp:RequiredFieldValidator>
            </div>
            <div class="formRow">
                <label for="RadEditorResume" class="textLabel">
                    Resume:</label>
                <br />
                <telerik:RadEditor RenderMode="Lightweight" runat="server" SkinID="BasicSetOfTools" ID="RadEditorResume" EmptyMessage="Please fill in your resume!"
                    EditModes="Design" Width="550px" Height="300px">
                </telerik:RadEditor>
                <br />
                <asp:RequiredFieldValidator ID="ResumeValidator" runat="server" CssClass="validator"
                    ControlToValidate="RadEditorResume" Display="Dynamic">* Please fill in your resume!</asp:RequiredFieldValidator><br />
                <asp:CustomValidator runat="server" ID="EditorLengthValidator" CssClass="validator"
                    ControlToValidate="RadEditorResume" Display="Dynamic" ClientValidationFunction="TelerikDemo.checkLength">* Your resume is too short. Its length should be at least 50 symbols.</asp:CustomValidator><br />
                <script type="text/javascript">
                     
                </script>
            </div>
     
            <div class="formRow">
                <telerik:RadButton RenderMode="Lightweight" ID="SubmitButton" runat="server" Text="Submit">
                </telerik:RadButton>
                <asp:Label ID="StatusLabel" runat="server"></asp:Label>
                <asp:ValidationSummary ID="valSum" runat="server" HeaderText="Fields marked with * are required"></asp:ValidationSummary>
            </div>
        </div>
        </form>
    </body>
    </html>

    Support & Learning Resources

    Find Assistance