HTML and CSS Reference
In-Depth Information
figure 6-68
Data validation error message in Google chrome
blank name
field fails the
validation test
a cu
stomer name
is required
Trouble?
If you are running Internet Explorer or Safari, you might not see an
error message.
◗
7.
Enter
Alice Nichols
in the Name box and then click the
Submit My Survey
but-
ton again. Verify that the browser displays an error message next to the blank
input box for the
email
field.
◗
8.
Enter
alice.nichols@redballpizza.com
in
the E-mail box and submit the form
again. Verify that an error message now appears next to the input box for the
receipt
field.
◗
9.
Enter
re-123456
in the Receipt number box and submit the form one last time.
Verify that no error messages are displayed by the browser, and that the browser
displays a dialog box with the message
No invalid data detected. Will retain data
for further testing
.
The dialog box you encountered in Step 9 is not part of HTML5 or your Web
browser; it comes from the
formsubmit.js
JavaScript file you linked to back in the
first session. The message appears only once you've passed all of the HTML5 vali-
dation checks.
◗
10.
Click the
OK
button to close the dialog box and return to the Web page.
Note that all of your data values have been preserved in the survey form. This is also a
feature of the
formsubmit.js
JavaScript file to avoid re-typing field values as you continue
to test the Web page.
Validating Based on Data Type
The new data types supported by HTML5 also can be used for data validation. For
example, a data field with the
number
data type will be rejected if non-numeric data is
entered. Similarly, fields marked using the
email
and
url
fields will be rejected if a user
provides an invalid e-mail address or Web site URL.
E-mail addresses must be entered in the form
username@domain
. Verify that your
browser rejects an invalid e-mail address by attempting to enter erroneous data in the
email
field.
