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> </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
3 Comments to Javascript Captcha
I’ve had some feedback on this now, 1 user has reported that it has made no difference to the spam rate, and others have said that it’s completely stopped. If you have tried it out I’d be interested in hearing what results you get.
Shaun
the users email address in as clear as day in the html form, this is what we are trying to avoid dumbass!
Thanks for your (rather useless) comment - this is because this is a *CAPTCHA* script, not for the *FORM* html code. The example uses the mailto: in the action purely as an example, if you’re going to use this method to post the form then there is no way to stop you’re email address being spammed, but it’ll still prevent it from coming through the form.
June 10, 2009