Easy jQuery AJAX PHP Captcha - 2 minute setup
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
Download
There is a complete working download package on GitHub. Star and Fork as you please. :)
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!
Get practical advice to start your career in programming!
Master complex transitions, transformations and animations in CSS!
Latest Remote Jobs




