Simple Numeric Captcha In Pure JavaScript – JS-Captcha

Category: Form , Javascript | May 17, 2018
Author: NelGarbuzova
Views Total: 906
Official Page: Go to website
Last Update: May 17, 2018
License: MIT

Preview:

Simple Numeric Captcha In Pure JavaScript – JS-Captcha

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 */
}

 

Leave a Reply