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 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.
Search WWH ::

Custom Search