A sophisticated and general-purpose data entry function for post-validation and batch error reporting is shown in Example 7-2. Only part of the script is shown; the remainder of the script includes the same PHP code to retrieve data and the HTML to display the customer
<form> as in Example 6-7 in Chapter 6.
In the example, the
<form> tag contains a long script for the
onSubmit event that is called when the user clicks the Submit button. The code creates and sets properties for each data entry widget. As all widgets are mandatory, a
description property is created and set (e.g.,
this.email.description = 'Email'). This description is later displayed in an error dialog box if data isn't entered. For widgets that are optional-there are none in this example, but the full customer
<form> in Chapter 10 has them-an
true property can be set.
For widgets that require specific validation, a property that describes the data type is set. For example, the
true to ensure that validation appropriate to an
verify( ) function is called with the
this refers to the
<form>) object as a parameter; the
<form> object includes all widgets and their properties.
For compactness, we don't describe in detail how the
verify( ) function works. However, it has the following features:
The function progressively creates a message to display to the user-much like
$errorStringin the PHP validation-as errors are detected. After collecting all errors, an error dialog box is shown listing all errors the user needs to correct before the
<form>will submit. An example of the error dialog box is shown in Figure 7-2.
All widgets that are inputs of type
textareaand aren't optional are checked to ensure they contain data.
Numeric fields are checked to ensure they are actually numeric and, if the value must fall in a range, the value is checked to ensure it's within the range.
Emails are checked in a simplistic way. The email must contain exactly one
@symbol and must not contain whitespace.
Dates are checked to ensure they are in the
DD/MM/YYYYformat used in most countries.
Fields that should not contain whitespace are checked to ensure they don't contain spaces, tabs, or carriage returns.
verify( ) function isn't comprehensive and certainly doesn't do all the validation proposed for the winestore customer
<form>. However, in most cases, the customer
<form> can't be submitted without a good chance of it passing the server-side validation checks.
</script> tags in Example 7-2 can be saved in the file valid.js and then included into several HTML pages using the
src attribute of the
This approach has the advantage of reducing network traffic if the user has a web browser cache, because a copy of the script can be reused in multiple HTML pages.
Case study: A password <form> validation function
onSubmit event, an
onChange event is trapped for the two password widgets,
formPassword2; the function
thesame( ) is called whenever the user changes the data in a widget and then leaves it. The reporting is field-by-field, and a sample dialog box output by the script is shown in Figure 7-3.
Figure 7-3. A dialog box produced by the script in Example 7-3
thesame( ) checks if the current widget contains data. If it does, the data in the widget is compared to the data in the other password widget. If the data in the widgets is different, an error message is shown to the user. It's necessary to test whether both widgets actually contain data in interactive validation; without this check, the function annoyingly displays an error before the user has the opportunity to enter data into both widgets.
There are several other events that are commonly trapped and handled in validation:
When a user removes focus from a
<frame>, or window
Left mouse button click on a
When a user brings focus to a
<frame>, or window
When the user exits a page