Skip to main content

Easy jQuery AJAX PHP Captcha - 2 minute setup

By Sam Deering

JavaScript

Share:

Free JavaScript Book!

Write powerful, clean and maintainable JavaScript.

RRP $11.95

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

easy-jquery-php-captcha

Download

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

VIEW ON GITHUB

Setup

HTML

Uses Bootstrap markup.

*Please enter the verication code shown below.

     

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('captcha correct, submit form success!');
                    });

                    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 < 5; $i++) {
    $string .= chr(rand(97, 122));
}

$_SESSION['captcha'] = $string; //store the captcha

$dir = '../fonts/';
$image = imagecreatetruecolor(165, 50); //custom image size
$font = "PlAGuEdEaTH.ttf"; // custom font style
$color = imagecolorallocate($image, 113, 193, 217); // custom color
$white = imagecolorallocate($image, 255, 255, 255); // custom background color
imagefilledrectangle($image,0,0,399,99,$white);
imagettftext ($image, 30, 0, 10, 40, $color, $dir.$font, $_SESSION['captcha']);

header("Content-type: image/png");
imagepng($image);

?>

checkCaptcha.php – this is simple. It checks the if the code matches and returns result to the front-end.

< ?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! :)

Sam Deering has 15+ years of programming and website development experience. He was a website consultant at Console, ABC News, Flight Centre, Sapient Nitro, and the QLD Government and runs a tech blog with over 1 million views per month. Currently, Sam is the Founder of Crypto News, Australia.

New books out now!

Learn how Git works, and how to use it to streamline your workflow!


Google, Netflix and ILM are Python users. Maybe you should too?