Step By Step: Add Image Validation To Your Website Form
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
Original article and source code for download are available at http://picella.com
--The author, David Picella, is a PhD Student at the University of
Wisconsin Milwaukee. In addition to his technical articles on
technology and Internet subjects, he has written other articles on
health care topics in women's health and reproductive care.
