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

Custom Character Set

  • Demo Configurator
  • Characters to Use:
    LettersAndNumbers

RadCaptcha allows you to easily control the character set from which the CaptchaImage text is randomly generated.

There are three predefined sets to choose from:

  • LettersAndNumbers
  • Letters
  • Numbers

If you wish to specify your own character set, choose CustomCharSet for the CaptchaImage.TextChars property and set the desired character sequence to the CaptchaImage.CharSet property. Please note that for security reasons you need to provide at least 15 characters.

Additionally, you can tell the RadCaptcha to respect/ignore the letter case by setting the IgnoreCase property. By default the letter case is ignored (i.e., IgnoreCase="true").

  • DefaultVB.aspx
  • DefaultVB.aspx.vb
  • Styles.css
<%@ Page Language="vb" AutoEventWireup="true" Inherits="Telerik.Web.Examples.Captcha.CharacterSet.DefaultVB"CodeFile="DefaultVB.aspx.vb"  %>

<%@ 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="Styles.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript">
        function pageLoad() {
            //Disable autoComplete
            var customCaptchaTextbox = $get("<%=txtCharSet.ClientID %>");
            if (customCaptchaTextbox)
                customCaptchaTextbox.setAttribute("autoComplete", "off");
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <telerik:RadFormDecorator RenderMode="Lightweight" ID="RadFormDecorator1" runat="server" DecorationZoneID="zoneToDecorate"
        DecoratedControls="All" />
    <div class="demo-containers">
        <div class="demo-container" id="zoneToDecorate">
            <div style="float: left; padding-left: 20px">
                <telerik:RadCaptcha ID="RadCaptcha1" runat="server" ErrorMessage="Page not valid. The code you entered is not valid."
                    ValidationGroup="Group" EnableRefreshImage="true" CaptchaTextBoxCssClass="textBox">
                    <CaptchaImage ImageCssClass="imageClass" BackgroundColor="#dff3ff" TextColor="Black">
                    </CaptchaImage>
                </telerik:RadCaptcha>
                <div style="margin-top: 15px;">
                    <telerik:RadButton RenderMode="Lightweight" ID="btnValidate" runat="server" Text="Verify Code" ValidationGroup="Group">
                    </telerik:RadButton>
                </div>
            </div>
        </div>
    </div>
    <telerik:RadAjaxManager ID="ajaxManager" runat="server">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="Characters1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="Characters1"></telerik:AjaxUpdatedControl>
                    <telerik:AjaxUpdatedControl ControlID="RadCaptcha1"></telerik:AjaxUpdatedControl>
                    <telerik:AjaxUpdatedControl ControlID="ConfiguratorColumn2"></telerik:AjaxUpdatedControl>
                </UpdatedControls>
            </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="btnUpdateChanges">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadCaptcha1"></telerik:AjaxUpdatedControl>
                    <telerik:AjaxUpdatedControl ControlID="ConfiguratorColumn2"></telerik:AjaxUpdatedControl>
                </UpdatedControls>
            </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="cbIgnoreCase">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadCaptcha1"></telerik:AjaxUpdatedControl>
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>
    <qsf:ConfiguratorPanel ID="ConfigurationPanel1" runat="server">
        <Views>
            <qsf:View>
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn1" runat="server" Size="Medium">
                    <ul class="fb-group">
                        <li><span class="label">Characters to Use:</span>
                            <qsf:DropDownList ID="Characters1" runat="server" AutoPostBack="true" OnSelectedIndexChanged="Characters1_SelectedIndexChanged">
                                <Items>
                                    <telerik:DropDownListItem Text="LettersAndNumbers" Selected="True"></telerik:DropDownListItem>
                                    <telerik:DropDownListItem Text="Letters"></telerik:DropDownListItem>
                                    <telerik:DropDownListItem Text="Numbers"></telerik:DropDownListItem>
                                    <telerik:DropDownListItem Text="CustomCharSet"></telerik:DropDownListItem>
                                </Items>
                            </qsf:DropDownList>
                        </li>
                        <li><span class="checkbox">
                            <asp:CheckBox ID="cbIgnoreCase" runat="server" Text="Ignore Case of the Letters"
                                AutoPostBack="true" Checked="true" OnCheckedChanged="CheckBox_IgnoreCase"></asp:CheckBox>
                        </span></li>
                    </ul>
                </qsf:ConfiguratorColumn>
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn2" runat="server" Size="Medium">
                    <ul class="fb-group">
                        <li>
                            <qsf:TextBox ID="txtCharSet" runat="server" Text="abcdefghijkmnopqrstuvwxyz" Width="200px"
                                Visible="false" BorderStyle="Solid" Label="RadCaptcha Character Set (Enter at least 15 characters):"
                                CssClass="textBox">
                            </qsf:TextBox>
                        </li>
                        <li>
                            <qsf:Button ID="btnUpdateChanges" runat="server" Text="Set" OnClick="btnUpdateChanges_Click"
                                Visible="false">
                            </qsf:Button>
                        </li>
                    </ul>
                </qsf:ConfiguratorColumn>
            </qsf:View>
        </Views>
    </qsf:ConfiguratorPanel>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance