User-Friendly Form Validation with PHP and CSSby Jeff Cogswell
One of the more common problems PHP programmers must tackle is that of form data validation. For example, suppose you have a form where users must enter an email address. Using a regular expression, you could test whether the format of the email address is valid before using the email address; if the email address doesn't have a valid format, you can ask the user to re-enter it.
Unfortunately, many people code their form tags so that the tag's
action parameter takes the user to another page that processes the
data. Where does data validation fit in? Many PHP programmers resort to
expression, and if the format is wrong, display a pop-up message box and not allow
the form's submit to go through.
This message would be on the page along with the original form. Also, the item in the form that had the problem (in this case, the text box where the user enters an email address) might have a visual indication of a problem, such a text label whose color is red, as shown in Figure 1.
Figure 1. A form with a validation error
What if you want your validation to involve a database lookup? This clearly must take place on the server side. It would be nice if the user could click Submit and have the form return a message that the username is not valid, similar to the example in Figure 1, for valid email formats.
A lot of web sites already provide such functionality. Unfortunately, these websites often have the filename extensions .asp or .aspx, and not .php. What a shame. Who says the ASP folks down the street should have all the fun? In this article, I'll show you how you can add such functionality to your PHP forms. (Besides, have you ever tried programming in ASP? Frankly, PHP is a lot easier!)
The Basic Key
The basic key to implementing a form validation pattern is to understand the
flow of page processing that takes place. Without server-side validation (or
action parameter set to the page that will receive and process the
request that's separate from the page hosting the form. For example, you might
have this line inside of a login.php page:
<form method="post" action="processlogin.php">
In this scenario, the login page contains the form where the user enters the username and password, and the username and password get sent back to the processlogin.php page, which tests the username and password against a database. What if the login turns out to be incorrect? You might have separate PHP code in the processlogin.php page that prints out another form for the user to try again. Or, if you're sneaky, you might manipulate the headers and send the user back to the original processlogin.php page.
There's another way to do it that's a little cleaner, and, more importantly, allows you to keep your validation code right inside of the login.php page. Since data validation is associated with the form, it only makes sense to keep the data code together with the form. Consider the following line inside of your login.php file:
<form method="post" action="login.php">
action parameter points the user right back to the
same page the user was already on. Hmmmm, now that sounds kind of interesting,
doesn't it? Then, at the beginning of the login.php page, you would
include PHP code that does the validation on the server side. (Of course, you
have to get a little sneaky to prevent the validation from taking place the
first time the page loads.) Then, when the validation succeeds, you issue a
redirect like so, using the
This might sound a bit confusing, but once you get the gist of the basic flow, it actually makes good sense and is quite simple. The following sections show how to implement this approach.
Pages: 1, 2