Simple PHP + JavaScript CAPTCHA

While I was developing Fuck It All, I came across an issue that I’ve never had to deal with before. Since I was accepting user input that would in turn be posted on my site, I needed a way to make sure SPAM bots wouldn’t be able to make posts. There is quite a simple solution to this and I’m sure you have all come across it before, CAPTCHA inputs.

CAPTCHA inputs are small verifications, usually found on forms, which are easy enough for all humans to solve, but something that an automated machine wouldn’t be able to compute. These are commonly just a few words, but with some sort of distortion applied to them. Such text is, up until now, unreadable for computers. However, most humans can distinguish the individual characters without a problem.

For me to set up a system like that (without outsourcing), was way beyond what I wanted to do/had time to do. I could have easily used a publicly available widget and integrated that into my site, but I wanted to keep it classy and in-house. My friend helped me implement a simple CAPTCHA mechanism that can easily be implemented into a site using only PHP to generate the CAPTCHA and JavaScript to validate it.

HTML entities are reserved characters in HTML. To read more about HTML entities, go here.

Now for the actual CAPTCHA. Using these HTML entities, we can show a simple addition problem with two numbers. Most humans should be able to pass this quick test, while spam bots won’t be able to recognize what your site is asking them due to the HTML entities.

In your form, add the following PHP code:

<php 
   $num1 = "&#" . rand(49,57) . ";";
   $num2 = "&#" . rand(49,57) . ";";
   echo "<label for='captcha'>* <span id='captchaval1'>$num1</span> + <span id='captchaval2'>$num2</span> = </label><input type='text' name='captcha' id='captcha' maxlength='2' required /> (just making sure you're not a robot)";
?>

This generates two random numbers between 1 and 9 and tells the user to solve the math problem. Now we need to check if the user is correct using the following JavaScript code:

<script type='text/javascript'>
function validate() {
   var passed;
   var val1 = document.getElementById('captchaval1').innerHTML;
   var val2 = document.getElementById('captchaval2').innerHTML;
   var captchaval = document.getElementById('captcha').value;
   var result = parseInt(val1) + parseInt(val2);
   if (result != captchaval) {
      passed = false;
   } else {
      passed = true;
   }

   return passed;
}
</script>

By returning the ‘passed’ value to the form, you can check whether the user got the simple math question right or not. From there, you can handle the form submission as you please.

I would also like to thank my good friend Daniel for bringing this to my attention and helping me out with this code. If you have a second, you should check out some of his stuff as well. Right along the same alley: http://omniimpact.com/

Thanks for reading! I hope you guys enjoyed my first code posting!