JavaScript
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
Spambots and Email Links
I got a sidetracked a couple of months ago and thought about how the usual email link <a href=”mailto: gets targeted so much by spam bots. To try and get around this, the fact that very few spam bots will be able to parse the javascript within a HTML document lead me to write a really simple script. I can’t imagine this will eliminate all spam from posting an email address on a site, but hopefully it should reduce it significantly.
Since using this script (back in July 2008) none of my customers have complained about receiving spam from having their email address posted on their site…
- Copy and paste the code below between <script> tags in the head of your document, or download the mail2 script
- If you need it to parse an email address other than .co.uk you’ll need to edit line 12
- Where you want the email address to appear, dump in <script type=”text/javascript”>mail2(”joebloggs”,”hotmail”)</script> - this will produce joebloggs@hotmail.co.uk
- Let me know how you get on
/*
JavaScript Mail2 Script
- 2009 Shaun Gill -
http://www.shaungill.co.uk
*/
var d = "mailto:"
var e = "@"
var f = ".co.uk"
function mail2(a,b)
{
document.write('<a href="'+d+a+e+b+f+'">'+a+e+b+f+'</a>');
}