JS Tutorial
Download
Demo
- Overview
- Documents
User Rating: 4.1/5 ( 2 votes)
Your Rating:
Easy jQuery PHP Captcha
Setup a Captcha in seconds.
- Integrated with jQuery Validate plugin
- Use custom fonts
- Unique secure back-end generated captcha (PHP)
- No reCaptcha pain.
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
}
?>
