demosthenes.info

I’m Dudley Storey, the author of Pro CSS3 Animation. This is my blog, where I talk about web design and development with , and . To receive more information, including news, updates, and tips, you should follow me on Twitter or add me on Google+.

web developer guide

my books

Book cover of Pro CSS3 AnimationPro CSS3 Animation, Apress, 2013

my projects

CSSslidy: an auto-generated #RWD image slider. 3.8K of JS, no JQuery. Drop in images, add a line of CSS. Done.

tipster.ioAutomatically provides local tipping customs and percentages for services anywhere.

PHP Form Validation: Showing Errors

php / forms

Estimated reading time: 3 minutes

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" maxlength="28" />
<label for="postalcode" accesskey="p">Postal code</label>
<input type="text" name="postalcode" id="postalcode" size="9" maxlength="7" />
<label for="email" accesskey="e">eMail address</label>
<input type="text" name="email" id=email" size="50" maxlength="48" />
<label for="province" accesskey="t">Province / Territory</label>
 <select name="province" id="province">
<option value="" selected="selected">-- select one --</option>
<option value="AB">Alberta</option>
<option value="BC">British Columbia</option>
<option value="MB">Manitoba</option>
<option value="NB">New Brunswick</option>
<option value="NL">Newfoundland and Labrador</option>
<option value="NS">Nova Scotia</option>
<option value="NT">Northwest Territories</option>
<option value="NU">Nunavut</option>
<option value="ON">Ontario</option>
<option value="PE">Prince Edward Island</option>
<option value="QC">Québec</option>
<option value="SK">Saskatchewan</option>
<option value="YT">Yukon</option>
</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" maxlength="28" value="<?php echo $firstname; ?>" />
<label for="postalcode" accesskey="p">Postal code</label>
<input type="text" name="postalcode" id="postalcode" size="9" maxlength="7" 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>
<option value="AB" <?php if ($province == "AB") { echo 'selected'; } ?>>
Alberta</option>
<option value="BC" <?php if ($province == "BC") { echo 'selected'; } ?>>
British Columbia</option>

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:

<style>
.error { background: red; }
</style>

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" maxlength="28" 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" maxlength="7" value="<?php echo $postalcode; ?>" class="<?php if ($errorpostalcode) { echo "error"; } ?>" />

This also works for the drop-down menu: 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.

comments powered by Disqus

This site helps millions of visitors while remaining ad-free. For less than the price of a cup of coffee, you can help pay for bandwidth and server costs while encouraging further articles.