jQuery Basic CAPTCHA Code Example

  1. Client-side
  2. Server-side

I. Client-side

The jQuery Captcha code example shows the most basic source code required to protect a jQuery application with BotDetect CAPTCHA and validate the user input.

It can be used as a starting point when you first learn how to use BotDetect in your jQuery application.

Download the BotDetect ASP.NET CAPTCHA Library and run this example

Installed Location

By default, the jQuery Basic CAPTCHA code example project is installed at:
C:\Program Files\Captcha Inc\BotDetect 4 CAPTCHA Component\Asp.Net\.NET\WebApp\SimpleAPI\jQueryCaptchaExample

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

basic-captcha.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>BotDetect jQuery CAPTCHA Examples</title>
  <link href="styles/styles.css" type="text/css" rel="stylesheet">
</head>
<body>
  <header>
    <div class="header-content"><h1>BotDetect jQuery CAPTCHA Examples</h1></div>
  </header>

  <nav>
    <ul class="nav">
      <li><a href="basic-captcha.html" class="active">Basic Example</a></li>
      <li><a href="contact-captcha.html">Contact Example</a></li>
   </ul>
  </nav>

  <section id="main-content">
    <form id="basicForm" method="POST">
      <div id="form-messages"></div>

      <!-- show Captcha image html-->
      <div id="botdetect-captcha" data-stylename="jqueryBasicCaptcha"></div>

      <label>
        <span>Retype the characters from the picture:</span>
        <!-- captcha code user input textbox -->
        <input 
          type="text" 
          name="captchaCode" 
          id="captchaCode" 
          data-correct-captcha
        >
      </label>

      <div class="error captchaCode"></div>

      <button type="submit" id="submitButton">Validate</button>
    </form>
  </section>
  
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
  <script src="node_modules/jquery-captcha/dist/jquery-captcha.min.js"></script>
  <script src="js/basic.js"></script>
</body>
</html>

Adding Captcha protection to the jQuery form is as simple as declaring an HTML element and set to data-stylename attribute a Captcha style name defined in botdetect.xml configuration file below.

In captcha code input element, we add data-correct-captcha attribute. It will tell BotDetect Captcha jQuery plugin to validate captcha code on blur event.

Finally, do not forget to include the BotDetect Captcha jQuery plugin in your HTML template.

basic.js

$(function() {
  
  // load BotDetect Captcha, it requires you to configure 
  // BotDetect ASP.NET Captcha path to captchaEndpoint setting
  var captcha = $('#botdetect-captcha').captcha({
    captchaEndpoint: 'BotDetectCaptcha.ashx'
  });
  
  
  // UI captcha validation on blur event by using the custom 'validatecaptcha' event
  // and checking the 'isCorrect' variable to either show error messages 
  // or check captcha code input field status when form is submitted
  $('#captchaCode').on('validatecaptcha', function(event, isCorrect) {
    // display or remove error message
    if (isCorrect) {
      $('.captchaCode').text('');
    } else {
      $('.captchaCode').text('Incorrect code');
    }
  });
  
  
  // validate captcha when form is submitted
  $('#basicForm').submit(function(event) {
      
    // captcha id for validating captcha at server-side
    var captchaId = captcha.getCaptchaId();

    // captcha code input value for validating captcha at server-side
    var captchaCode = captcha.getCaptchaCode();

    var postData = {
      captchaId: captchaId,
      captchaCode: captchaCode
    };

    $.ajax({
      method: 'POST',
      url: 'form/BasicHandler.ashx',
      data: JSON.stringify(postData),
      success: function(response) {
        if (response.success) {
          // captcha validation passed at server-side
          $('#form-messages')
            .removeClass()
            .addClass('alert alert-success')
            .text('CAPTCHA validation passed.');
        } else {
          // captcha validation failed at server-side
          $('#form-messages')
            .removeClass()      
            .addClass('alert alert-error')
            .text('CAPTCHA validation falied.');
        }
      },
      complete: function() {
        // always reload captcha image after validating captcha at server-side 
        // in order to update new captcha code for current captcha id
        captcha.reloadImage();
      },
      error: function(error) {
        throw new Error(error);
      }
    });

    event.preventDefault();
  });
  
});

We first load BotDetect Captcha jQuery plugin, it requires you to configure a BotDetect ASP.NET Captcha path to captchaEndpoint setting.

Once we add data-correct-captcha attribute in the captcha code input element, BotDetect Captcha jQuery plugin will then automatically validate captcha code on blue event in default. And to check the UI captcha validation result, we listen the custom validatecaptcha event, which will be fired on captcha code input blur event.

On form submit, we need to send captcha id value and captcha code visitors submitted to server-side to validate Captcha code once at server-side api. Once request finished, we always reload Captcha by calling reloadImage() function of captcha object. This is needed to generate the new captcha code for the current captcha id.

II. Server-side

botdetect.xml

<?xml version="1.0" encoding="UTF-8"?>
<botdetect xmlns="https://captcha.com/schema/net" 
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="https://captcha.com/schema/net 
     https://captcha.com/schema/net/botdetect-4.4.0.xsd">

  <captchaStyles>
    <captchaStyle>
      <name>jqueryBasicCaptcha</name>
      <userInputID>captchaCode</userInputID>
      <codeLength>3-5</codeLength>
    </captchaStyle>
  </captchaStyles>

</botdetect>

In botdetect.xml, we configure some captcha options for our jquery basic captcha. You can find a full list of available SimpleCaptcha configuration options and related instructions at the SimpleCaptcha configuration options page.

BasicHandler.ashx

<%@ WebHandler Language="C#" Class="BasicHandler" %>

using System;
using System.Web;
using System.IO;
using Newtonsoft.Json;
using System.Collections.Generic;
using BotDetect.Web;


public class BasicHandler : IHttpHandler
{
    public void ProcessRequest (HttpContext context)
    {
        if (HttpContext.Current.Request.HttpMethod == "POST")
        {
            string dataJson = new StreamReader(context.Request.InputStream).ReadToEnd();

            Dictionary<string, string> formDataObj = new Dictionary<string, string>();
            formDataObj = JsonConvert.DeserializeObject<Dictionary<string, string>>(dataJson);

            string captchaId = formDataObj["captchaId"];
            string captchaCode = formDataObj["captchaCode"];

            // validate captcha
            SimpleCaptcha captcha = new SimpleCaptcha();
            bool isHuman = captcha.Validate(captchaCode, captchaId);

            if (isHuman)
            {
                // Captcha validation passed
                // TODO: do whatever you want here
            }

            // the object that stores validation result
            Dictionary<string, bool> validationResult = new Dictionary<string, bool>();
            validationResult.Add("success", isHuman);

            // write the validation result as json string for sending it back to client
            context.Response.ContentType = "application/json; charset=utf-8";
            context.Response.Write(JsonConvert.SerializeObject(validationResult));
        }
        else
        {
            context.Response.ContentType = "text/plain";
            context.Response.Write("HTTP GET request is not allowed.");
        }
    }

    public bool IsReusable
    {
        get
        {
            return false;
        }
    }
}

At server-side api, we will get captchaId and captchaCode values sent from client-side and use Validate(captchaCode, captchaId) method of SimpleCaptcha instance to validate Captcha code. Finally, we write the validation result as json string for sending it back to client.


Please Note

jQuery Captcha Plugin requires the new experimental Simple API that is currently available in BotDetect Java v4.0.Beta3+, BotDetect PHP v4.2.0+, as well as in BotDetect ASP.NET v4.4.0 build for legacy .NET.
The Simple API for ASP.NET Core will be available in the BotDetect ASP.NET v4.4.1 that will be released in few weeks time.