HTML and CSS Reference
In-Depth Information
you're selling an item). You might even want to allow your visi-
tors to save the state of their submission, even if the form isn't
currently complete and valid.
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 field. As we saw in the
previous section, if you want to disable the native validation
feedback (that is, the little bubbles that appear under the input
elements) but still have the JavaScript API available—which still
returns true or false for the valid states on the fields—then this
bad boy is for you.
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 fields. The following example
snippet of code would allow you to have a save session button
with each fieldset to allow the user to save his progress without
triggering the validation rules from running until he hits the final
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 fields inside the
fieldset 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 find all the form fields).
