CaptchaServer Logo


Ready to use CAPTCHAs for your website.

captcha image


2. Client Side ( Front-end )

captcha-client is used.


Add following tag to your html <script src="" ></script>


  1. Create a div where you want to place the captcha.
    ` <div id="captcha-container" ></div>`
  2. Create a new captcha object.
    It takes two parameters:
    • DOM element that is container for captcha
    • API address where captcha-server is running.

    when object is created, div #captcha-container will be popoulated with a captcha.

      var captcha = new CaptchaClient(document.getElementById('captcha-container'), 'https://localhost:3001');
  3. Adding event listeners.
    captcha-client provides following events:
         captcha.on('load', function(){
               // do something when captcha loads first time
           captcha.on('reload', function(){
               // do something when captcha is reloaded
           captcha.on('pass', function(){
               // do something when captcha test is passed by user
           captcha.on('fail', function(){
               alert("Try Again");
               // do something when user enters wrong characters
           captcha.on('test', function(passed){
               console.log('Tested. Result is: ' + passed);
               // do something when user clicks on the submit button of captcha
  4. Checking if captcha test is passed or not:
    Use property isPassed.
        if(captcha.isPassed){ //returns true if captcha is passed
              //do something

Check out Captcha Example to see how to integrate front-end and back-end.


In lieu of a formal styleguide, take care to maintain the existing coding style. Add unit tests for any new or changed functionality. Lint and test your code.