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

Generate New CaptchaImage



  • Demo Configurator

This example demonstrates two important features of the RadCaptcha control:

  • Refresh Captcha Image Functionality—RadCaptcha lets the user refresh the captcha image if they cannot read the current one. To enable this, simply set the EnableRefreshImage property to true and a LinkButton that generates new images, will be rendered in the captcha.
  • Validate a Custom TextBox and Render only the Captcha Image—you can validate the captcha via a custom TextBox by following these steps:
    1. Set the CaptchaImage.RenderImageOnly property to true to render only the captcha image without the TextBox and Label of the control.
    2. Set the ValidatedTextBoxID property to the ID of the TextBox which you want to use for entering the RadCaptcha code.
  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • Styles.css
<%@ Page Language="c#" AutoEventWireup="true" Inherits="Telerik.Web.Examples.Captcha.RefreshImage.DefaultCS"CodeFile="DefaultCS.aspx.cs"  %>

<%@ 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("<%=txtRadCaptcha.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" runat="server" DecorationZoneID="zoneToDecorate" DecoratedControls="All" />

    <div class="demo-containers">
    <div class="demo-container"  id="zoneToDecorate">
        <telerik:RadCaptcha ID="RadCaptcha1" runat="server" ErrorMessage="Page not valid. The code you entered is not valid."
            ValidationGroup="Group" EnableRefreshImage="true">
            <CaptchaImage ImageCssClass="imageClass"></CaptchaImage>
        </telerik:RadCaptcha>
        <asp:Label ID="lblTxtRadCaptcha" Text="Custom Captcha Textbox" Visible="false" runat="server" />
        <asp:TextBox ID="txtRadCaptcha" runat="server" Visible="false" MaxLength="5"></asp:TextBox>
        <div>
            <telerik:RadButton RenderMode="Lightweight" ID="btnValidate" runat="server" Text="Verify Code" ValidationGroup="Group"></telerik:RadButton>
        </div>                                    
    </div>                                  
    </div>
    <br />
    <br />
    <telerik:RadAjaxLoadingPanel runat="server" ID="RadAjaxLoadingPanel1"></telerik:RadAjaxLoadingPanel>
    <telerik:RadAjaxManager ID="ajaxManager" runat="server" DefaultLoadingPanelID="RadAjaxLoadingPanel1">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="cbCustomTextBox" EventName="CheckedChanged">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="txtRadCaptcha"></telerik:AjaxUpdatedControl>
                    <telerik:AjaxUpdatedControl ControlID="lblTxtRadCaptcha"></telerik:AjaxUpdatedControl>
                    <telerik:AjaxUpdatedControl ControlID="RadCaptcha1"></telerik:AjaxUpdatedControl>
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>

    <qsf:ConfiguratorPanel ID="Configuratorpanel1" runat="server">
        <Views>
            <qsf:View>
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn1" runat="server" Size="Wide">
                    <ul class="fb-group">
                        <li>    
                            <span class="checkbox"><asp:CheckBox ID="cbCustomTextBox" runat="server" AutoPostBack="true" Text="Use the TextBox below to enter the RadCaptcha Code"
                                OnCheckedChanged="EnableCustomTextBoxValidation"></asp:CheckBox></span>
                        </li>
                    </ul>
                </qsf:ConfiguratorColumn>
            </qsf:View>
        </Views>
    </qsf:ConfiguratorPanel>

    </form>
</body>
</html>

Support & Learning Resources

Find Assistance