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.

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 -->

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.


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

<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