There are many possible ways to show the user they have entered incorrect information on a form. Asterisks are common, but when doing server-side validation I prefer to use something with a little more visual impact.

First, we are continuing on from our last lesson: we should have both a form.html page and a formhandler.php page. Take the code for the form from the first page, and place if as the result of finding an error in formhandler.php:

<?php if ($errorflag) { ?>
	<form method="post" action="formhandler.php">
		<fieldset>
			<legend>Please enter your information</legend>
			<label for="firstname" accesskey="f">First name</label>
			<input type="text" name="firstname" id="firstname" size="30">
			<label for="postalcode" accesskey="p">Postal code</label>
			<input type="text" name="postalcode" id="postalcode" size="9">
			<label for="email" accesskey="e">eMail address</label>
			<input type="email" name="email" id=email" size="50">
			<label for="province" accesskey="t">Province / Territory</label>
			<select name="province" id="province">
				<option value="" selected>-- select one --
				<option value="AB">Alberta
				<option value="BC">British Columbia
				<option value="MB">Manitoba
				<option value="NB">New Brunswick
				<option value="NL">Newfoundland and Labrador
				<option value="NS">Nova Scotia
				<option value="NT">Northwest Territories
				<option value="NU">Nunavut
				<option value="ON">Ontario
				<option value="PE">Prince Edward Island
				<option value="QC">Québec
				<option value="SK">Saskatchewan
				<option value="YT">Yukon
			</select>
		<input type="submit" value="Go">
	</fieldset>
</form>
<?php } else {
	/* process the form information */
} ?>

Then upload both pages to a server and test them. You will find that filling out the form correctly on the form.html page and pressing Submit yields a blank page on formhandler.php, but entering an error presents the form again. The problem is that the form resets: all the information that the user enters is blank, which would be a very frustrating experience. Filling in the values the user entered to present them on formhandler.php is very easy:

<label for="firstname" accesskey="f">First name</label>
<input type="text" name="firstname" id="firstname" size="30" value="<?php echo $firstname; ?>">
<label for="postalcode" accesskey="p">Postal code</label>
<input type="text" name="postalcode" id="postalcode" size="9" value="<?php echo $postalcode; ?>">

(Note that we used the value of the original $postalcode variable, not the $temp_postalcode variable we generated for testing purposes).

The drop-down menu is a little tricker. There are a few ways of approaching it; whatever the solution, we must make the option that the user chose have the attribute selected. The simplest (albeit least efficient) method to achieve this is the following:

<select name="province" id="province">
<option value="" <?php if (!$province) { echo 'selected'; } ?>>
-- select one --
<option value="AB" <?php if ($province == "AB") { echo 'selected'; } ?>>
Alberta
<option value="BC" <?php if ($province == "BC") { echo 'selected'; } ?>>
British Columbia

Now the form on formhandler.php will present the information the user originally entered. Next, we have to show which fields are incorrect. My preferred method is to write an embedded style for formhandler.php:

.error { background: red; }

As we have individual variables to track errors for each field, we can use those to present the class appropriately:

<label for="firstname" accesskey="f">First name</label>
<input type="text" name="firstname" id="firstname" size="30" value="<?php echo $firstname; ?>" 
	class="<?php if ($errorfirstname) { echo "error"; } ?>">
<label for="postalcode" accesskey="p">Postal code</label>
<input type="text" name="postalcode" id="postalcode" size="9" value="<?php echo $postalcode; ?>"
	class="<?php if ($errorpostalcode) { echo "error"; } ?>">

This also works for the drop-down: you just have to be careful to put the class in both the select tag and the first option, as different browsers will respond to each. If the field has an error, it will be highlighted in red; if not, class="" is still valid, and the appearance of the field will not change. Pressing the submit button on formhandler.php will re-submit the entered information to the same page; nothing will get by until the user has correctly entered information into all fields.

There are many possibilities for what we might want to happen if the user's information if it is all correct: sending the information via eMail or entering it into a database are two popular options, both of which we will come to in short order.

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.