ASP Classic CAPTCHA Client-side Workflow Settings Code Example (BotDetect ASP v4.x; discontinued)

The ASP Classic Captcha client-side workflow settings code example shows how to use custom BotDetect CAPTCHA client-side events to execute user-defined JavaScript code at various stages of the Captcha challenge workflow.

First Time Here?

Check the BotDetect Developer Crash Course for key integration steps.

Client-side Captcha object initialization, Captcha image reloading, Captcha sound playback, built-in Captcha Ajax validation, and Captcha help link clicks all have a number of related client-side "events" and hooks where user-defined client-side callbacks can be injected.

User code can be associated with Captcha workflow events using the BotDetect.RegisterCustomHandler() function, as shown in the example JavaScript code.

Loading the form will initialize the client-side Captcha object (created by the BotDetect.Init() JavaScript call included in Captcha markup), and result in the PostInit event.

Clicking the Captcha sound icon will result in the PrePlaySound event before the audio elements are added to the page DOM. There is no PostPlaySound event since not all browsers allow user callbacks when browser sound playing finishes.

Clicking the Captcha reload icon will result in PreReloadImage and PostReloadImage events, executed before and after the Http request loading the new Captcha image from the server.

Clicking the Captcha image (i.e. the included Captcha help link) will result in the OnHelpLinkClick event.

Typing in a Captcha code and clicking the Validate button will first result in the PreAjaxValidate event, and later in either AjaxValidationFailed or AjaxValidationPassed depending on whether the server responds that the typed-in Captcha code was correct or not. In case of Ajax asynchronous request errors, AjaxValidationError will be called.

Installed Location

By default, the Classic ASP client-side workflow settings code example is installed at:
C:\Program Files\Captcha Inc\BotDetect 4 CAPTCHA Component\Asp\WebApp\CaptchaClientSideWorkflowSettingsExample

You can also run it from the BotDetect Start Menu:
Programs > Captcha Inc > BotDetect 4 CAPTCHA Component > ASP > Web Applications > Run

Download the BotDetect Classic ASP CAPTCHA Component and run this example

Default.asp
BotDetect.asp

Default.asp

<!-- #include file ="BotDetect.asp" -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
  <title>BotDetect ASP Classic CAPTCHA Options: Client-Side Workflow Settings 
  Code Example</title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <link type="text/css" rel="Stylesheet" href="<%= CaptchaUrls.LayoutStylesheetUrl() %>" />
  <link type="text/css" rel="Stylesheet" href="StyleSheet.css" />
</head>
<body>
  <form method="post" action="" class="column" id="form1">

    <h1>BotDetect ASP Classic CAPTCHA Options: 
    <br /> Client-Side Workflow Settings Code Example</h1>
    
    <fieldset>
        <legend>ASP Classic CAPTCHA validation</legend>
        <label for="CaptchaCode">Retype the characters from the picture:</label>
        
        <% ' Adding BotDetect CAPTCHA to the page 
          Dim ClientSideEventsCaptcha : Set ClientSideEventsCaptcha = (New 
          Captcha)("ClientSideEventsCaptcha")
          ClientSideEventsCaptcha.UserInputID = "CaptchaCode"
          Response.Write ClientSideEventsCaptcha.Html 
        %>

        <div class="validationDiv">
            <input name="CaptchaCode" type="text" id="CaptchaCode" />
            <input type="submit" name="ValidateCaptchaButton" value="Validate" 
            id="ValidateCaptchaButton" onclick="startAsyncCaptchaValidation(); return false;" />
            
            <% ' CAPTCHA user input validation (only if the form was sumbitted)
              If Request.ServerVariables("REQUEST_METHOD") = "POST" Then
                Dim isHuman : isHuman = ClientSideEventsCaptcha.Validate()
                If Not isHuman Then 
                  ' CAPTCHA validation failed, show error message
                  Response.Write "<span class=""incorrect"">Incorrect code</span>"
                Else 
                  ' CAPTCHA validation passed, perform protected action
                  Response.Write "<span class=""correct"">Correct code</span>"
                End If 
              End If
            %>
        </div>
    </fieldset>
    
    <h4>Custom BotDetect Client-Side Events Debug Log</h4>
    <div id="output"></div>

    <script type="text/javascript">
    function log(text) {
      var output = document.getElementById('output');
      var line = document.createElement('pre');
      line.innerHTML = timestamp() + ' ' + text;
      output.insertBefore(line, output.firstChild);
    }
    
    function timestamp() {
      return new Date().toTimeString().replace(/.*(\d{2}:\d{2}:\d{2}).*/, "$1");
    }
    
    function format(url) {
      return url.replace(/^.*?\?/g, '').replace(/&/g, '\n  &');
    }

     BotDetect.RegisterCustomHandler('PostInit', function() { 
      log('PostInit \n  CaptchaId ' + this.Id + '\n  InstanceId ' + this.
      InstanceId); 
    });
    
    // custom javascript handler executed before Captcha sounds are played
    BotDetect.RegisterCustomHandler('PrePlaySound', function() { 
      log('PrePlaySound'); 
    });
    
    // custom javascript handler executed before Captcha images are reloaded
    BotDetect.RegisterCustomHandler('PreReloadImage', function() { 
      log('PreReloadImage\n  ' + format(this.Image.src) + '\n  AutoReload: ' + 
      this.AutoReloading); 
    });
    
    // custom javascript handler executed after Captcha images are reloaded
    BotDetect.RegisterCustomHandler('PostReloadImage', function() { 
      log('PostReloadImage\n  ' + format(this.Image.src)); 
    });
    
     // register handlers for the four steps of the BotDetect Ajax validation 
     workflow
    BotDetect.RegisterCustomHandler('PreAjaxValidate', function() { 
      log('PreAjaxValidate\n  ' + format(this.ValidationUrl + '&i=' + 
      this.GetInputElement().value));
    });
    
    BotDetect.RegisterCustomHandler('AjaxValidationFailed', function() { 
      log('AjaxValidationFailed');
    });
    
    BotDetect.RegisterCustomHandler('AjaxValidationPassed', function() { 
      log('AjaxValidationPassed');
    });
    
    BotDetect.RegisterCustomHandler('AjaxValidationError', function() { 
      log('AjaxValidationError');
    });
    
    BotDetect.RegisterCustomHandler('OnHelpLinkClick', function() { 
      log('OnHelpLinkClick');
      this.FollowHelpLink = false; // abort help page opening
    });

    
    function startAsyncCaptchaValidation() {
      var input = document.getElementById('CaptchaCode');
      if (input && 'text' == input.type) {
        // call the BotDetect built-in client-side validation function
        // this function must be called after the Captcha is displayed on the 
        // page, otherwise the
        // client-side object won't be initialized
        input.Captcha.StartAjaxValidation();
      }
    }
  </script>
    
  </form>
</body>
</html>

[back to the top of the page]

CaptchaConfig.asp

<%

' BotDetect ASP Captcha configuration options
' ---------------------------------------------------------------------------
BotDetect.HelpLinkMode = BDC_HelpLinkModes("Image")

%>

[back to the top of the page]