Add New Tag

Javascript Captcha

Today I was tasked with creating a Captcha for a company as none of the off the shelf solutions out there really fitted the bill as they were pretty ugly and the colours couldn’t really be customised to the brand of the site.

Creating a Captcha in JavaScript is a relatively simple task; it needs to decide a random 5-digit code, display the code as a distorted image, and then prevent the form from being submitted until the correct code has been entered.

First, I’ll tell you how to implement into your forms just in case you’re here for a solution rather than to find out the code.

The JavaScript file will need to be called in the <head></head> section of your page as so…

<script src="scripts/jscaptcha.js" type="text/javascript"></script>

Once you have done that, write your form in HTML as you normally would, and then where you want jsCaptcha to appear on your form, add…

<script type="text/javascript">jscaptcha()</script>

This one line of code calls the images and then displays a text box for the user to enter the answer. Once you have done that, in the code for the Submit button, you will need to have an onClick event happen to test what the user has typed in, as so…

<input type="submit" onClick="return jscaptchaSubmit(this.form)" value="Submit">

Now open up jscaptcha.js in your editor and edit line 13 from http://www.shaungill.co.uk/scripts/jscaptcha/ to http://www.yoursite.co.uk/ - this bit isn’t important as it’s only used for calling the images, but if I ever change my site or just leave it to expire you’ll lose your images!

Job Done - you can download the script here in a zip package

The code…

/*

  JavaScript Captcha Script
   -  2009 Shaun Gill  -
http://www.landingnet.co.uk
http://www.shaungill.co.uk   

*/

// Set Variables   
    var site    =    'http://www.shaungill.co.uk/scripts/jscaptcha/';  // this needs to be the 'root' of the site - although keeping that link will still work

    var first    =    (Math.floor(Math.random()*10))+'';
    var second    =    (Math.floor(Math.random()*10))+'';
    var third    =    (Math.floor(Math.random()*10))+'';
    var fourth    =    (Math.floor(Math.random()*10))+'';
    var fith    =    (Math.floor(Math.random()*10))+'';

    var captcha    =    (first + second + third + fourth + fith);

function jscaptcha()
{
// Display the Captcha Images

    document.write("<label>&nbsp;</label>");
    document.write("<div id=\"jscaptcha\" style=\"border: 1px solid #f90; width: 150px;\">");
    document.write("<img src=\"" + site + "images/" + first    + ".gif\" alt=\"\">");
    document.write("<img src=\"" + site + "images/" + second + ".gif\" alt=\"\">");
    document.write("<img src=\"" + site + "images/" + third + ".gif\" alt=\"\">");
    document.write("<img src=\"" + site + "images/" + fourth + ".gif\" alt=\"\">");
    document.write("<img src=\"" + site + "images/" + fith + ".gif\" alt=\"\">");
    document.write("</div>");

// Display the Input Box
    document.write("<label>Enter Numbers from the Image</label>");
    document.write("<input type=\"text\" name=\"jscaptchaInput\">");

}

function jscaptchaSubmit(frm)
{
    if(frm.jscaptchaInput.value != captcha)
    {
        alert("Please double check the numbers you entered; I\'m afraid they don\'t quite match");
        valid = false;       
    }
    else
    {
        valid = true;
    }
    return valid;
}

The variables:

site - this is the root address of your site
first - fith - these are the numbers that make up the 5-digit code
captcha - this is the final 5-digit code that gets displayed on the form

function jscaptcha()

this is the section that displays the images and puts a border around them all, and then displays the input text box

function jscaptchaSubmit(frm)

if the what the user has entered doesn’t (!=) match the code, display an error message and halt the form submission (valid = false)
otherwise all is good (valid = true)
report the results back to the form (return valid) and halt submission if is false

Again, download the script here in a zip package

A working example can be found here