JSPM – jquery-captcha@2.1.0

Package Exports

jquery-captcha

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (jquery-captcha) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

BotDetect Captcha jQuery Plugin (BotDetect Captcha Simple API integration for all of the jQuery versions)

Quick guide:

1) Captcha jQuery Plugin Installation

npm install jquery-captcha --save

2) Include Captcha jQuery Plugin in Your Web App

<script src="node_modules/jquery-captcha/dist/jquery-captcha.min.js"></script>

3) Load Captcha jQuery Plugin in Your App

Java Captcha endpoint:

$(document).ready(function() {
    // DOM ready
    var captcha = $('#botdetect-captcha').captcha({
      captchaEndpoint: '/botdetect-java-captcha-api-path-at-server-side/botdetectcaptcha'
    });
});

PHP Captcha endpoint:

$(document).ready(function() {
    // DOM ready
    var captcha = $('#botdetect-captcha').captcha({
      captchaEndpoint: '/botdetect-php-captcha-api-path-at-server-side/simple-botdetect.php'
    });
});

4) Display Captcha In Your View

<div id="botdetect-captcha" data-stylename="exampleCaptcha"></div>

5) Validate Captcha on the Client-side

Using validateUnsafe(callback) method to validate Captcha code on form submit:

// On form submit
$('#exampleForm').submit(function(event) {

  captcha.validateUnsafe(function(isCaptchaCodeCorrect) {

    if (isCaptchaCodeCorrect) {
      // Captcha code is correct
    } else {
      // Captcha code is incorrect
    }
    
  });

  event.preventDefault();
});

Using data-correct-captcha directive attribute to validate Captcha code on blur event:

<input 
  type="text" 
  name="captchaCode"
  id="captchaCode"
  data-correct-captcha
>

$('#captchaCode').on('validatecaptcha', function(event, isCorrect) {
  if (isCorrect) {
    // UI Captcha validation passed
  } else {
    // UI Captcha validation failed
  }
});

6) Validate Captcha on the Server-side

These client-side captcha validations are just an UI usability improvement that you may use or not -- they do not protect your form from spammers at all.

As you are protecting some server-side action you must validate a Captcha at the server-side before executing that protected action.

Server-side Captcha validation with Java Captcha looks in this way:

SimpleCaptcha captcha = SimpleCaptcha.load(request);
boolean isHuman = captcha.validate(captchaCode, captchaId);

Server-side Captcha validation with PHP Captcha looks in this way:

$captcha = new SimpleCaptcha();
$isHuman = $captcha->Validate($captchaCode, $captchaId);

Docs:

jQuery CAPTCHA Integration Guide

Code Examples:

Dependencies:

Captcha jQuery plugin uses Captcha library for Captcha image and Captcha sound generation. At the moment challenges are generated in Java backend with BotDetect Java Captcha library and PHP backend with BotDetect PHP Captcha library, but BotDetect ASP.NET is going to work with Captcha jQuery plugin soon as well.

Technical Support:

Through contact form on captcha.com.