Minimal Math Captcha JavaScript Library – jCaptcha.js

Category: Form , Javascript | September 11, 2017
Author: robiveli
Views Total: 171
Official Page: Go to website
Last Update: September 11, 2017
License: MIT

Preview:

Minimal Math Captcha JavaScript Library – jCaptcha.js

Description:

jCaptcha.js is a lightweight, vanilla JavaScript plugin which creates a simple, random, <canvas> based math captcha to protect against spam.

How to use it:

Insert the minified version of the jCaptcha.js library into the web page.

<script src="jCaptcha.min.js"></script>

Create an html form where you want to generate the math captcha.

<form class="form" action="">

  <input class="jCaptcha" type="text" placeholder="Type in result please">
  <button class="button" type="submit">Submit</button>

</form>

Initialize the math captcha.

var myCaptcha = new jCaptcha({

    // set callback function
    callback: function(response, $captchaInputElement) {

        if (response == 'success') {

            $captchaInputElement[0].classList.remove('error');
            $captchaInputElement[0].classList.add('success');
            $captchaInputElement[0].placeholder = 'Submit successful!';

        }

        if (response == 'error') {

            $captchaInputElement[0].classList.remove('success');
            $captchaInputElement[0].classList.add('error');
            $captchaInputElement[0].placeholder = 'Please try again!';

        }

    }

});

Validate the math captcha on form submit.

document.querySelector('form').addEventListener('submit', function(e) {

  e.preventDefault();

  // captcha validate
  myCaptcha.validate();

});