Form Validation with Progressive Enhancement: Final Touches

Do you remember that the sample HTML form coded at the beginning pointed its “action” attribute to a file called “processform.php”? Well, this file will be charged with validating incoming data by means of the “Validator” class that you saw before.

Thanks to the compact and chainable interface exposed by this class, the definition of the file will be short:

(processform.php)

<?php

// include 'Validator' class

require_once 'Validator.php';

$validator = new Validator;

// check entered form data

$validator->checkEmpty($_POST['fname'])

->checkEmpty($_POST['lname'])

->checkEmail($_POST['email']);

echo !$validator->validate() ?

$validator->getFormattedErrors() :

'<p>The data you entered is correct.</p>';

There you have it. Once the validation class is included in the above script, using an instance of it to check whether or not the values entered in the earlier contact form are correct is reduced to calling the appropriate methods and displaying the corresponding error messages when applicable.

Again, it’s valid to recall the role that Progressive Enhancement plays in this case: if JavaScript is turned off, the form will be properly checked, but the errors will be displayed on a separate window. On the other hand, with scripting enabled, the process will remain nearly the same, the sole exception being that the errors in question will be echoed to the same web page that contains the form. This process is depicted in the following screen capture:

Not too bad, right? At this point you have at your disposal yet another example that shows in a practical manner how to use PE when validating web forms. If you have developed applications that combine the functionality of Ajax and a server-side language like PHP, among others, PE is definitely the right way to make your applications accessible to a broader range of users.

Final thoughts

In this sixth installment of the series, I finished building a sample web application tasked with validating web forms via Ajax and PHP. As you saw a moment ago, the use of Progressive Enhancement was crucial to keeping the application working as expected, even if JavaScript is disabled on the browser.

Of course, the implementation of PE can be extended to many other web programs with the same satisfactory results. In keeping with this, in the next part I’m going to show how to use this approach when building a jQuery-based slide show.

Want to see how this will be accomplished? Then don’t miss the upcoming part!