jQuery validate plugin plus PHP equals captcha

Posted at Oct 22, 2009 7:06:05 AM by Ronald Busky | Share

With all the captcha's out there right now why would anyone reinvent the wheel and write another one. Well I did and here is why.

When I build forms, my go-to validation is 9 out of 10 times its jQuery plugin: Validation. Keeping with that and their built in functionality to basically = something to something. I used that to my advantage and use PHP to create a simple captcha.

How it works

Let's start with what you will need. 1. A Form, 2. The PHP, 3. The jQuery. Cool we got that? let's move on.

Lets begin with the simple PHP that builds the math

Here we are basically setting two different numbers (randomNum and randomNum2) and getting their total in (randomNumTotal). You can read up on the rand() php function, but basically what it's doing here is giving me a random 1 digit number from 0-9.

Now we need to set up our jQuery pieces. so here is what you would need to include inside of your <head> tag.

	$.validator.methods.equal = function(value, element, param) {
		return value == param;
	};
	$(document).ready(function(){
		$("#yourform").validate({
				rules: {
					lastName: "required",
					math: {
						equal:
					}
				},
				messages: {
					lastName: "*",
					math: "*"
				}
			});
	});

Now with that javascript done, all we need to is create the form and style it up. Here is a really simple form with a person's first name and last name and the captcha.

THE CSS

table td{height:30px;}
form label.error, label.error{color:red;padding:0 0 0 10px;}
input.error,select.error,textarea.error{border:1px solid red;}
.required {color:red; font-weight:bold;}

THE FORM

<form action="" enctype="multipart/form-data" method="post">
<table cellpadding="0" cellspacing="0" border="0" width="500">
<tr>
<td width="150" valign="top">First Name</td>
<td valign="top"></td>
</tr>
<tr>
<td width="150" valign="top">Last Name</td>
<td valign="top"> <span class="required">*</span></td>
</tr>
<tr>
<td width="150" valign="top" height="30">Security &lt;input type=&quot;text&quot; name=&quot;captchaImage&quot; size=&quot;6&quot; value=&quot; + " disabled="disabled" /&gt;</td>
<td valign="top" height="30"> Please enter the correct result.</td>
</tr>
<tr>
<td width="150">&nbsp;</td>
<td valign="top"></td>
</tr>
</table>
</form>

And thats pretty much it. I would pressume that this can be changed for a bunch of other uses. maybe creating an array of the alphabet. selecting 1 letter, then the letter that follows and having the answer be the one after that (ex: A,B -- answer: C). Or selecting two letters that are one letter apart and having the user select which one is in the middle (ex: A,C -- answer: B).

-> Check out the live version of jQuery validate plugin plus PHP equals captcha

Well Here is the whole code for you. Remember it needs to be a PHP file.

<title>Using jQuery and PHP to create random addition problem as a captcha</title>

table td{height:30px;}
form label.error, label.error{color:red;padding:0 0 0 10px;}
input.error,select.error,textarea.error{border:1px solid red;}
.required {color:red; font-weight:bold;}

	$.validator.methods.equal = function(value, element, param) {
		return value == param;
	};
	$(document).ready(function(){
		$("#yourform").validate({
				rules: {
					lastName: "required",
					math: {
						equal:
					}
				},
				messages: {
					lastName: "*",
					math: "*"
				}
			});
	});

Example of using jQuery and PHP to create random addition problem as a captcha


<form action="" enctype="multipart/form-data" method="post">
<table cellpadding="0" cellspacing="0" border="0" width="500">
<tr>
<td width="150" valign="top">First Name</td>
<td valign="top"></td>
</tr>
<tr>
<td width="150" valign="top">Last Name</td>
<td valign="top"> <span class="required">*</span></td>
</tr>
<tr>
<td width="150" valign="top" height="30">Security &lt;input type=&quot;text&quot; name=&quot;captchaImage&quot; size=&quot;6&quot; value=&quot; + " disabled="disabled" /&gt;</td>
<td valign="top" height="30"> Please enter the correct result.</td>
</tr>
<tr>
<td width="150">&nbsp;</td>
<td valign="top"></td>
</tr>
</table>
</form>