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

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



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