Easy jQuery AJAX PHP Captcha – 2 minute setup

Key Takeaways

• Setting up a working AJAX Captcha can be done in minutes, providing a basic captcha generated by PHP, allowing customization in terms of size, font, and color. It’s integrated with jQuery Validate plugin for remote ajax request to verify captcha correctness.
• The Captcha setup involves HTML, jQuery, and PHP. HTML uses Bootstrap markup, jQuery sets up the events for captcha refresh, and PHP 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.
• jQuery PHP Captcha offers several benefits including an additional layer of security to forms, prevention of automated bots from submitting spam, easy integration into existing forms, and high customization options. It’s compatible with all modern browsers that support JavaScript.

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

Frequently Asked Questions (FAQs) about jQuery PHP Captcha