HTML and CSS Reference
In-Depth Information
Discussion
Remember that the new input types in HTML5 are derived from the solutions that
developers have been creating with HTML and JavaScript for quite a while. This means
it is fairly easy to find UI libraries that provide substitute functionality for browsers that
do not yet support HTML5 forms.
In the future, when all of your users have upgraded to browsers that support HTML5
elements, input types, and attributes, you'll be able to quickly and easily remove the
scripts without needing to change your markup.
See Also
For a list of fallback solutions or polyfills, see
https://github.com/Modernizr/Modernizr/
3.14 Validating Form Data in Older Browsers with JavaScript
Problem
You want to validate form data in browsers that do not support HTML5.
Solution
Use the Modernizr JavaScript library (see
http://www.modernizr.com
)
to detect support
for specific HTML5 attributes and script alternate solutions when features are not
supported. (Refer back to
Recipe 3.13
, for information on Modernizr and other Java-
Script libraries.)
Save Modernizr locally and call it in the
head
of your document. We'll also call jQuery
an event handler:
<head>
<script src="modernizer.js"></script>
<script src="jquery.js"></script>
</head>
Code your form using HTML5 form validation attributes, such as
required
and
pattern
:
<form>
<fieldset>
<legend>Login</legend>
<p><label>Username <input type="text" name="username" required></label></p>
<p><label>Password <input type="password" name="password" required
pattern="[0-9a-zA-Z]{12}" title="Must be 12 alphanumeric
characters"></label></p>
</fieldset>
<p><button type="submit">Submit</button></p>
</form>
