I wanted to write a simple Captcha that I could easily integrate into my own scripts that would work with or without Javascript. My first approach was to find open-source that I could pretty much just copy and paste into my code with little modification. All the cookie-cutter Captcha scripts I found were so bloated with extra code and were either only client-side (Javascript) or server-side (PHP), that I decided to create something from scratch. What I came up with is a script that uses Ajax for a smoother user experience (no browser reload on submit), but also works if the user has Javascript disabled for progressive enhancement (or graceful degradation).
Dependencies: jQuery, jQuery Validation Plugin and jQuery Placeholder Plugin
Assumptions: Understands jQuery and PHP, and has used jQuery Validation Plugin. Note: This tutorial is written for developers and only explains the captcha portion. I don’t go into other workings of the form, ie: Ajax submit, error handling, etc.
Captcha Field
The following code section goes into your HTML form to create the Captcha section. To set the values of the fields to be added, use PHP rand() function to get a different random value each time the page is loaded (1st number is random number 1-4, and 2nd number is random number from 5-9 for easy use).
<input id="num1" class="sum" type="text" name="num1" value="<?php echo rand(1,4) ?>" readonly="readonly" /> +
<input id="num2" class="sum" type="text" name="num2" value="<?php echo rand(5,9) ?>" readonly="readonly" /> =
<input id="captcha" class="captcha" type="text" name="captcha" maxlength="2" />
<span id="spambot">(Are you human, or spambot?)</span>
Define custom method for Validation Plugin
Method basically gets the random values from the form, the total value entered by the user, adds them together and compares. If the two numbers don’t equal the total, then it returns an error. Otherwise it returns the result.
$.validator.addMethod('captcha',
function(value) {
$result = ( parseInt($('#num1').val()) + parseInt($('#num2').val()) == parseInt($('#captcha').val()) ) ;
$('#spambot').fadeOut('fast');
return $result;
},
'Incorrect value, please try again.'
);
Call custom validation method defined above
The highlighted sections are the relevant parts to the Captacha. The rest is doing error handling for the other form fields.
$('#contact').validate({
debug: false,
rules: {
message: {
required: true,
minlength: 10,
maxlength: 255
},
captcha: {
required: true,
captcha: true }
},
messages: {
firstName: "First name field required.",
lastName: "Last name field required.",
email: {
required: "Email address required",
email: "Email address must be in the format name@domain.com."
},
message: {
required: "Message field required",
minlength: "Message must contain at least 10 characters.",
maxlength: "Message must not contain more than 255 characters."
},
chkCaptcha: {
required: "* Required"
}}});
Server side handler (PHP) in case Javascript is disabled
Now we have to handle captcha if Javascript is disabled. Since the captcha values are generated using PHP, we can retrieve those from the POST array.
$num1 = isset($_POST['num1']) ? $_POST['num1'] : "";
$num2 = isset($_POST['num2']) ? $_POST['num2'] : "";
$total = isset($_POST['captcha']) ? $_POST['captcha'] : "";
Define a Captcha function and call the function
function captcha_validation($num1, $num2, $total) {
global $error;
//Captcha check - $num1 + $num = $total
if( intval($num1) + intval($num2) == intval($total) ) {
$error = null;
}
else {
$error = "Captcha value is wrong.
";
}
return $error;
}
$captcha_error = captcha_validation($num1, $num2, $total);
Now Captcha can be validated with your other form variables. You can see a working demo here, or download it from the link below (contains all the code and dependent files).
Download from my GitHub page: https://github.com/laithsinawi/php-jquery-simple-math-captcha
