Form creation: input widgets, data binding, and data validation - HTML5 in Action - page 86

Listing 2.13. app.js—Using the month-picker polyfill
If you load the order form in any browser that doesn't natively support the month input
type, you should see the standard text input replaced with a month drop-down and a year
number input field. This is illustrated in the side-by-side screenshots in figure 2.12 .
Figure 2.12. Before the polyfill has been loaded, the Expiry Date field is represented merely by a text input. After
the polyfill has been loaded, the field has been replaced with a month drop-down and a year number input field.
The polyfill listens for changes to these fields and populates a hidden field, which stores the month in YYYY-MM
format. This hidden field will be sent to the server when the form is submitted.
You can apply the same technique to most of the HTML5 form's functionality. In fact, sev-
eral projects are in the works that aim to polyfill the entire set of forms features in HTML5.
These projects include
• Webshims Lib by Alexander Farkas ( http://afarkas.github.com/webshim/demos/ )
• H5F by Ryan Seddon ( https://github.com/ryanseddon/H5F )
• Webforms2 by Weston Ruter ( https://github.com/westonruter/webforms2 )
• html5Widgets by Zoltan “Du Lac” Hawryluk ( https://github.com/zoltan-dulac/
html5Forms.js )
Let's wrap up this chapter by performing some basic validation, even on browsers that
don't support the Constraint Validation API.
2.5.3. Performing validation without the Constraint Validation API