JAVASCRIPT

Form Validation with Progressive Enhancement: Final Touches

In this sixth part of a series, I finish building a sample web application tasked with validating web forms via Ajax and PHP. The use of Progressive Enhancement is crucial to keeping the application working as expected, even if JavaScript is disabled on the browser.

Author Info:

By: Alejandro Gervasio

Poor Best

Rating:

/ 3

July 21, 2010

TABLE OF CONTENTS:

As I explained at the beginning, it’s feasible to use Progressive Enhancement during the construction of a program that validates HTML forms. In the previous part of the series, I developed the client-side part of this program. Below I included its source code, so that you can analyze it and understand how it works. Here it is:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>

<title>Processing a web form using Progressive Enhancement</title>

$(document).ready(function() {

$("form").submit(function (event) {

event.preventDefault();

$.ajax({

type: "POST",

url: "processform.php",

data: ({fname: $("#fname").val(), lname: $("#lname").val(), email: $("#email").val()}),

success: function(msg) {

$("#errors").html(msg);

}

});

</script>

body {

padding: 0;

margin: 0;

background: #fff;

font: 0.8em Arial, Helvetica, sans-serif;

color: #000;

}

#wrapper {

width: 960px;

margin: 0 auto;

}

#header, #content, #footer {

padding: 20px;

}

</style>

</head>

<body>

<h1>Processing a web form using Progressive Enhancement</h1>

<h2>Header section</h2>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor commodo risus, et ultrices sapien vestibulum non. Maecenas scelerisque quam a nulla mattis tincidunt. Etiam massa libero, pharetra vel laoreet et, ultrices non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere ullamcorper lacus et sollicitudin. Morbi ultrices condimentum lacus, sit amet venenatis purus bibendum sit amet.</p>

</div>

<h2>Contact Form</h2>

<p><label for="fname">First Name</label> <input type="text" name="fname" id="fname" /></p>

<p><label for="email">Email Address</label> <input type="text" name="email" id="email" /></p>

</fieldset>

</form>

</div>

<h2>Footer section</h2>

</div>

</body>

</html>

As you can see, the above web page includes a typical contact form which, when submitted, will pass its inputted data to a PHP file called “processform.php.” Even though its definition hasn’t been shown yet, the file's responsibility will be to validate the entered data and display the error messages that might arise during the checking process. In general terms, this could be considered the regular version of this sample program, which is entirely functional.

Things become more interesting, however, when JavaScript is enabled on the browser. In that case, the previous PHP file will be requested via the “ajax()” jQuery method, and the pertinent error messages will be shown on the same web page. See how easy it is to use PE when validating an HTML form? I bet you do.

Of course, the missing part of this program is the file that actually validates the form’s fields. In this case, the file will use a PHP class to perform this task, but identical results can be obtained with a procedural script.

The definition of this class will be discussed in the following section. To see how it will look now, jump forward and read the next few lines.

Next: A basic data validation PHP class >>