HTML and CSS Reference
In-Depth Information
var
pattern was chosen for brevity, not reliability. Designing a good pattern depends
on many issues and exceeds this chapter's scope. To use this code, you need to call
the
fallbackValidation
function when validating the form. Locate the
valid-
ateForm
function in your app.js file, and add the following snippet before the line
if(orderForm.name.value.length < 4) {
.
if
(!
Modernizr
.
input
.
required
|| !
Modernizr
.
input
.
pattern
) {
fallbackValidation
();
}
The snippet uses Modernizr to test whether the
required
and
pattern
attributes are
supported, and if not, it calls the
fallbackValidation
function. If you run the ex-
ample in IE9, you should see that the validation includes checking
required
,
pattern
,
and
email,
as well as custom validation.
This fallback, Modernizr, and the month-picker polyfill are only a sample of the tools you
can use to quickly provide backward compatibility in your HTML5 applications. You could
easily expand on these to provide support for even older browsers such as IE6 (hint: use
a library like jQuery to help with things like event handlers and DOM traversal). You
shouldn't let a lack of browser support stop you from using HTML5 form features—it's
easy to fill any gaps.
2.6. Summary
HTML5 gives you a lot of functionality for improving web forms. New input types like
email
and
tel
provide more widgets with less coding. Using the new input attribute,
pattern
, enables many validation tasks to be done with no JavaScript. Creating custom
validation tests and error message is now much easier with the Constraint Validation API.
Also, binding data to HTML elements can be done more efficiently with the
data-*
at-
tribute.
Unfortunately, browser support is spotty, and browser vendors have been relatively slow
to implement these features. Slow and partial implementation of form features appears un-
likely to change anytime soon. But this shouldn't stop you from adding HTML5 form func-
tionality to your web apps. When you have a powerful tool like Modernizr for detecting
