If you are a do-it-yourself programmer and you want to know how to add image validation to a form on your web site then this is the article for you. While there are many ways to do this, if you follow these steps, you will learn the easiest way to get the job done. Once you have mastered the example here, you will have all the concepts and experience you need to incorporate the final product into your form on your website.



We will need two files. The first file will create the validation image and incorporate the image in a validation form. Here is the step-by-step code for the first file: verify.php

---BEGINNING OF FILE: VERIFY.PHP---

< ?php

// Create an image where width=200 pixels and height=40 pixels

$val_img = imagecreate(200, 40);

// Allocate 2 colors to the image

$white = imagecolorallocate($val_img, 255, 255, 255);

$black = imagecolorallocate($val_img, 0, 0, 0);

// Create a seed to generate a random number

srand((double)microtime()*1000000);

// Run the random number seed through the MD5 function

$seed_string = md5(rand(0,9999));

// Chop the random string down to 5 characters

// This is the validation code we will use

$val_string = substr($seed_string, 17, 5);

// Set the background of the image to black

imagefill($val_img, 0, 0, $black);

// Print the validation code on the image in white

imagestring($val_img, 4, 96, 19, $val_string, $white);

// Write the image file to the current directory

imagejpeg($val_img, "verify.jpg");

imagedestroy($val_img);

? >

< !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd" >

< html >

< head >

< meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" >

< title >Image Verification< /title >

< /head >

< body >

< img src="verify.jpg" height="40" width="200" alt="validation image" / >

< br / >< br / >Type in the validation code from the image. (case sensitive)

< form action="validateform.php" method="post" >

< input name="random" type="text" value="" >

< input type="submit" >

< !-- The validation code will be posted from a hidden form element -- >

< input name="validation" type="hidden" value="< ?php echo $val_string ? >" >

< /form >

< /body >

< /html >

---END OF FILE: VERIFY.PHP---

Now we will create a file that will perform the validation using the POST method:

---BEGINNING OF FILE: VALIDATEFORM.PHP---

< ?php

if ($_POST['validation'] == trim($_POST['random'])){

echo "You are validated";

}

else{

echo "Please go back and get validated.";

}

? >

---END OF FILE: VALIDATEFORM.PHP---

IMPORTANT NOTE: Because many free article websites don't support HTML in the body of the article the files above won't work unless you eliminate the space after < and before >. Just do a find and replace all.

That is really all there is to it. You probably noticed that I also went to the trouble of including the DOCTYPE and charset lines in this simple example. I did this as a little reminder to make sure that all of your pages on your website are W3C compliant. One of the biggest mistakes that many webmasters make is to neglect W3C compliance on their web pages. If your web pages are not W3C compliant you will get low search engine rankings. Even worse, if you are advertising, your ads may not be as relevant as they should be! In my other article, I explain W3C compliance and the most common mistakes.

Copyright 2006 David Picella