HTML and CSS Reference
In-Depth Information
Figure 4-15. Invalid text entered into an email input type field produces a validation error when
the form is submitted.
For browsers that don't support the new HTML5 client-side validation, a JavaScript
by Weston Ruter called webforms2.js can be included to provide support. This
script can be downloaded at https://github.com/westonruter/webform-
s2 .
Note It's a good rule of thumb to double-check the input received from a form on
the server side as well. The client-side validation behavior shown here is primarily to
increase the usability of your forms. They provide the user with some immediate feed-
back that they entered the wrong type of information, without necessitating you create
that functionality yourself using JavaScript or other means. When it comes to process-
ing the data on the server side, you will want to check it again to make sure the cor-
rect type of information was submitted. Who knows, maybe the user visited your form
from some obscure web browser that doesn't support client-side validation and slipped
through all your browser-sniffing checks and managed to mangle their e-mail address
when entering it into the form. These things happen, so double-check the submitted
data on the server.
By default the email input type supports only one e-mail address being entered
and will fail validation if more than one is added to the field. This can be changed,
however, if the Boolean attribute multiple is added the input field. It will then toler-
ate a comma-separated list of e-mail addresses entered into a single field.
The url input type will also complain if the wrong kind of information is entered
into the field. Any malformed URL address entered will throw a validation error similar
to Figure 4-15 . Additionally, it will add http:// when needed to complete a full URL
address.
The tel input type is a bit looser in that it is not looking for a particular format but
will complain if non-numerical characters are entered. It can't be strict on the format
of the numbers since telephone number formats differ around the world. To refine this
input type so that it does validate a particular telephone number format, there is attrib-
ute just for that purpose. Called the pattern attribute, this attribute takes a regular
 
Search WWH ::




Custom Search