Forms - HTML5 - page 77

3.8 Requiring a Form Field

Problem
You want to require a form field's completion prior to form submission.

Solution
Apply the HTML5 required attribute on any form field that must be completed in order
to submit the form:
<form>
<fieldset>
<legend>Login</legend>
<p><label>Username <input type="text" name="username" required ></label></p>
<p><label>Password <input type="password" name="pwd" required ></label></p>
</fieldset>
<p><button type="submit">Submit</button></p>
</form>

Discussion
The required attribute may be specified on zero or more form elements in a form.
When the user submits the form, any required field that has been left blank will cause
the browser to stop the submission and an error message will be displayed. The visual
display of the error varies from browser to browser, as shown in Figures 3-21 - 3-24 .
If a user agent does not recognize the required attribute, it will be ignored. You can
still craft JavaScript to perform this validation using this attribute, however. See
Recipe 3.14 , for details.
For a reference on required attribute support in browsers, see Table 3-8 .

Table 3-8. Browser support for the required attribute

IE Firefox Chrome Safari Opera iOS Android

10 Platform Preview 2 4.0+ 10+ 5.0+ 10.0+ ✓✓

See Also
Check browser support for form field validation at http://caniuse.com/form-validation .