Easy jQuery AJAX PHP Captcha – 2 minute setup

Setup a working AJAX Captcha in minutes. This is for when you need a super quick Captcha for a form with no pain of unreadable reCaptcha’s or such. It’s NOT a super hard to guess Captcha system it just provides a very basic captcha which is generated by PHP. Using this method does however allow you to choose your own size, font, color, background color which is nice. I have also integrated it with jQuery Validate plugin with a remote ajax request to check if the captcha is correct.

Features

• Integrated with jQuery Validate plugin.
• Custom captcha font, sizes, colors, background colors.
• Uniquely generated back-end by PHP.
• No reCaptcha pain, setup in seconds, no API key required.

Demo

The demo is built upon a lightweight bootstrap I created using jQuery, jQuery.validate, Require.js, Backbone.js, Bootstrap.

CAPTCHA DEMO

Download

There is a complete working download package on GitHub. Star and Fork as you please. :)

VIEW ON GITHUB

Setup

HTML

Uses Bootstrap markup.

<label class="" for="captcha">*Please enter the verication code shown below.</label>
<div id="captcha-wrap">
    <img src="/img/refresh.jpg" alt="refresh captcha" id="refresh-captcha" /> <img src="/php/newCaptcha.php" alt="" id="captcha" />
</div>
<input class="narrow text input" id="captcha" name="captcha" type="text" placeholder="Verification Code"/>

jQuery

Validation is run from a WEBAPP object which caches DOM elements and sets up the events for captcha refresh. I have used the Remote Validation Rule to check if the captcha is correct using ajax.

$(function()
{

    //jQuery Captcha Validation
    WEBAPP = {

        settings: {},
        cache: {},

        init: function() {

            //DOM cache
            this.cache.$form = $('#captcha-form');
            this.cache.$refreshCaptcha = $('#refresh-captcha');
            this.cache.$captchaImg = $('img#captcha');
            this.cache.$captchaInput = $(':input[name="captcha"]');

            this.eventHandlers();
            this.setupValidation();

        },

        eventHandlers: function() {

            //generate new captcha
            WEBAPP.cache.$refreshCaptcha.on('click', function(e)
            {
                WEBAPP.cache.$captchaImg.attr("src","/php/newCaptcha.php?rnd=" + Math.random());
            });
        },

        setupValidation: function()
        {

            WEBAPP.cache.$form.validate({
               onkeyup: false,
               rules: {
                    "firstname": {
                        "required": true
                    },
                    "lastname": {
                        "required": true
                    },
                    "email": {
                        "required": true
                    },
                    "captcha": {
                        "required": true,
                        "remote" :
                        {
                          url: '/php/checkCaptcha.php',
                          type: "post",
                          data:
                          {
                              code: function()
                              {
                                  return WEBAPP.cache.$captchaInput.val();
                              }
                          }
                        }
                    }
                },
                messages: {
                    "firstname": "Please enter your first name.",
                    "lastname": "Please enter your last name.",
                    "email": {
                        "required": "Please enter your email address.",
                        "email": "Please enter a valid email address."
                    },
                    "captcha": {
                        "required": "Please enter the verifcation code.",
                        "remote": "Verication code incorrect, please try again."
                    }
                },
                submitHandler: function(form)
                {
                    /* -------- AJAX SUBMIT ----------------------------------------------------- */

                    var submitRequest = $.ajax({
                         type: "POST",
                         url: "/php/dummyScript.php",
                         data: {
                            "data": WEBAPP.cache.$form.serialize()
                        }
                    });

                    submitRequest.done(function(msg)
                    {
                        //success
                        console.log('success');
                        $('body').html('<h1>captcha correct, submit form success!</h1>');
                    });

                    submitRequest.fail(function(jqXHR, textStatus)
                    {
                        //fail
                        console.log( "fail - an error occurred: (" + textStatus + ")." );
                    });

                }

            });

        }

    }

    WEBAPP.init();

});

PHP

newCaptcha.php file simply creates a new captcha image based on the font provided and color settings. It stores the captcha code in a PHP session variable called captcha.

< ?php
session_start();

$string = '';
for ($i = 0; $i checkCaptcha.php - this is simple. It checks the if the code matches and returns result to the front-end.

[code language="php"]
< ?php
session_start();

if(isset($_REQUEST['code']))
{
    echo json_encode(strtolower($_REQUEST['code']) == strtolower($_SESSION['captcha']));
}
else
{
    echo 0; // no code
}
?>

I hoped this helped you setup a quick captcha! If so, please leave a comment! :)