Simple Numeric Captcha In Pure JavaScript – JS-Captcha

Preview:

Description:

JS-Captcha is a native JavaScript library that creates a simple numeric captcha in your HTML form to prevent against spam.

How to use it:

Add the numeric captcha to your HTML form.

<form action="" id="form">
  <div class="captcha-base"></div>
  <button type="submit">Send form</button>
</form>

Place the main JavaScript file at the bottom of the webpage.

<script src="dist/js/app.js"></script>

Initialize the numeric captcha.

document.getElementById('form').addEventListener('submit', function(event) {
  alert('submitted');
  console.log('submitted');
  event.preventDefault();
})

Apply your own styles to the numeric captcha.

.captcha-base {
  /* styling of captcha box */
}
.captcha-base__input {
  /* styling of captcha input */
}
.captcha-reset {
  /* styling of reset button */
}
.captcha_valid {
  /* when is valid */
}
.captcha_invalid {
  /* when is invalid */
}
.captcha-base__input_valid {
  /* styling of captcha input when is valid */
}
.captcha-base__input_invalid {
  /* styling of captcha input when is invalid */
}

Changelog:

10/28/2018

• Minor update