Editor - ASP.NET Validators Support

Registration Form

  • Show/Hide Border
  • Table Properties
  • Delete Table
  • Row
    • Insert Row Above
    • Insert Row Below
    • Delete Row
  • Column
    • Insert Column to the Left
    • Insert Column to the Right
    • Delete Column
  • Cell
    • Merge Cells Horizontally
    • Merge Cells Vertically
    • Split Cell Horizontally
    • Split Cell Vertically
    • Delete Cell
  • Cell Properties
  • Table Properties
  • Properties...
  • Image Map Editor
  • Properties...
  • OpenLink
  • Remove Link
  • Insert Select
  • Cut
  • Copy
  • Paste
  • Paste from Word
  • Paste Plain Text
  • Paste As Html
  • Paste Html

Isolate this demo as a stand-alone application
  • About this demo
  • C#
  • VB

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"
="Static">Please fill in your RESUME!!!

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;  
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;  


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 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="../Common/styles.css" rel="stylesheet" type="text/css" />
    <link href="styles.css" rel="stylesheet" />
    <script src="scripts.js" type="text/javascript"></script>
    <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">
            <asp:RequiredFieldValidator ID="FirstValidator" runat="server" CssClass="validator"
                ControlToValidate="FirstBox" Display="Dynamic"> * </asp:RequiredFieldValidator>
        <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">
            <asp:RequiredFieldValidator ID="LastValidator" runat="server" CssClass="validator"
                ControlToValidate="LastBox" Display="Dynamic"> * </asp:RequiredFieldValidator>
        <div class="formRow">
            <label for="ExperienceList" class="textLabel">
                Skill Level:</label>
            <telerik:RadComboBox RenderMode="Lightweight" ID="ExperienceList" runat="server" Width="170">
                    <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>
        <div class="formRow">
            <label for="AddressBox" class="textLabel">
            <telerik:RadTextBox RenderMode="Lightweight" ID="AddressBox" runat="server" TextMode="MultiLine" Rows="5"
                EmptyMessage="Please fill in your address" Width="170" Height="100">
            <asp:RequiredFieldValidator ID="AddressValidator" runat="server" CssClass="validator"
                ControlToValidate="AddressBox" Display="Dynamic"> * </asp:RequiredFieldValidator>
        <div class="formRow">
            <label for="RadEditorResume" class="textLabel">
            <br />
            <telerik:RadEditor RenderMode="Lightweight" runat="server" SkinID="BasicSetOfTools" ID="RadEditorResume" EmptyMessage="Please fill in your resume!"
                EditModes="Design" Width="550px" Height="300px">
            <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">

        <div class="formRow">
            <telerik:RadButton RenderMode="Lightweight" ID="SubmitButton" runat="server" Text="Submit">
            <asp:Label ID="StatusLabel" runat="server"></asp:Label>
            <asp:ValidationSummary ID="valSum" runat="server" HeaderText="Fields marked with * are required"></asp:ValidationSummary>

Find Assistance

Help Us Improve

Was this example helpful?