Simple, Lightweight javascript Captcha Plugin – JS-Captcha

JS-Captcha is a simple, lightweight library that adds captcha, based on JavaScript, to your site. It is a native JavaScript library that creates a simple numeric captcha in your HTML form to prevent against spam.
javascript-captcha

Connect the dist/js/app.js file to your page. There is also dist/css/style.css file, that is recommended, but not required. Inside the forms for validation, create an emprty element as a child of the form with the class name”captcha-base”. The script will append the captcha into this block. If the element is not empty, its content will be ignored.

<!-- create form -->
<form action="" id="form">
	<div class="captcha-base"></div> <!-- add element with 'captcha-base' class name -->
	<button type="submit">Send form</button> 
</form>

Your script that listens to the form submit should be nested after the app.js script. Otherwise your script will not work. While the user does not enter the required captcha-value, the form will not be sent and other submit listeners will not work.

<!-- add script -->
<script src="dist/js/app.js"></script>
<!-- submit listeners must be added only after captcha script file! -->
<script>
	document.getElementById('form').addEventListener('submit', function(event) {
		alert('submitted');
		console.log('submitted');
		event.preventDefault();
	})
</script>

You can also modify CSS-styles for the captcha-box and for the captcha-input;

  • captcha-base, captcha-check – class names for styling captcha-box
  • captcha-base__input – class name for styling captha-base input
  • captcha-base__reset – class name for styling captcha-base reset button
  • captcha_valid – class name for styling captcha element, when entered value is valid
  • captcha_invalid – class name for styling captcha element, when entered value is invalid
  • captcha-base__input_valid – class name for styling captha-base input, when entered value is valid
  • captcha-base__input_invalid – class name for styling captha-base input, when entered value is invalid

See live demo and download source code.

DEMO | DOWNLOAD

This awesome plugin is developed by NelGarbuzova. Visit their official github repository for more information and follow for future updates.