HTML and CSS Reference
In-Depth Information
There are two levels of control for not validating. This can
apply to the individual input control or to the entire form. The
novalidate attribute can only be set on a form element and
prevents validation for that particular fi eld. So far there's no
practical use case for this fi eld, only theoretical ones. For
example, you might be in the situation where you want to use
type=”email” , and perhaps with browsers from the future will
accept type=”email” that allows the user to perform a lookup
from their address book. But you're not bothered about actually
validating any manual input the user might make—for instance,
because their email is part of an intranet, and doesn't look like
your typical email address. Using the novalidate attribute on the
form element allows you toachieve this.
The second method, formnovalidate , which is practical and
available today, is allowed on individual input elements and
button elements (though probably only makes sense on
type=”submit” and type=”button” ). The formnovalidate attribute
allows the form to be submitted and bypass all the validation
that has been set on the form fi elds. The following example
snippet of code would allow you to have a “save session” but-
ton with each fi eldset to allow the user to save his progress
without triggering the validation rules from running until he
hits the fi nal submit button:
<form>
<fieldset>
<legend>Some bits about you</legend>
<div>
<label for=”email”>Email:</label>
<input id=”email” name=”email” type=”email” required />
</div>
<div>
<label for=”url”>Homepage:</label>
<input id=”url” type=”url” name=”url” />
</div>
<input type=”submit” value=”save session”
¬ formnovalidate />
</fieldset>
Yo u c o u l d e v e n h o o k i n t o t h e “ s a v e s e s s i o n ” b u t t o n t o t r i g g e r
JavaScript-based validation based on only those fi elds inside
the fi eldset via the HTMLFieldSetElement.elements property
(though this is a new property in the HTML5 spec, so you may
have to rely on fieldset.getElementsByTagName and fi nd all the
form fi elds).
 
Search WWH ::




Custom Search