User-Friendly Form Validation with PHP and CSS

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 client-side validation using JavaScript. In the case of validating an email address, you could have JavaScript test the email address against a regular expression, and if the format is wrong, display a pop-up message box and not allow the form's submit to go through.

However, that's a bit clumsy (not to mention problematic, if the user turns off JavaScript). Rather, today's web sites usually let the user click the Submit button, and then the form's page reappears along with a message right on the page itself, stating the problem, such as "Please enter a valid email address."

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 with client-side JavaScript validation), you would have your form's 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">

Here, the 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 header function:

header("location: loginsucceeded.php");

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.