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