Peter Lubbers - Pro HTML 5 Programming

CHAPTER 7 ■ USING THE HTML5 FORMS API
Let’s break that code snippet down a bit.
First, we declare a handler to receive invalid events. The first thing we do inside that handler is
check the source of the event. Recall that the invalid event is fired on the form control with a validation
error. Therefore, the srcElement of the event will be the misbehaving form control.
From the source, we grab the validity object. Using this ValidityState instance, we can check its
individual constraint fields to determine exactly what went wrong. In this case, since we know that our
field has a required attribute on it, we first check to see if the valueMissing constraint has been violated.
If our check succeeds, we can modify the user interface on the page to inform the user that a value
needs to be entered for the field in error. Perhaps an alert or an informative error region could be
displayed? This is up to you to decide.
Once we’ve told the user what the error is and how to correct it, we need to decide if we want the
browser itself to display its built-in feedback. By default, the browser will do just that. To prevent the
browser from showing its own error message, we can call evt.preventDefault() to stop the default
handling and take care of the matter entirely ourselves.
Once again, the choice here is yours. The HTML5 Forms API provides you with the flexibility to
achieve a customized API or to fall back to default browser behavior.
Turning Off Validation
In spite of the power behind the validation API, there are… (ahem) valid reasons why you might want to
turn off validation on a control or an entire form. The most common reason is that you might choose to
submit the temporary contents of a form to be saved or retrieved for later, even if the contents aren’t
quite valid yet.
Imagine the case of a user who is entering a complex order entry form, but needs to run an errand
midway through the process. Ideally, you might present the user with a “save” button which stores the
values of the form by submitting them to the server. However, if the form was only partially completed,
validation rules might prevent the content from being submitted. The user would be very displeased if
she had to complete or abandon the form due to an unexpected interruption.
To handle this, a form itself can be programmatically set with the attribute noValidate, which will
cause it to forego any validation logic otherwise present and simply submit the form. Naturally, this
attribute can be set either via script or original markup.
A more useful way to turn off validation is to set a formNoValidate attribute on a control such as a
form submit button. Take the following submit button, set up as a “save” button, for example:
This snippet will create a two normal looking submit buttons. The second will submit the form, as
usual. However, the first button is marked with the noValidate attribute, causing all validation to be
bypassed when it is used. This allows the data to be submitted to the server without checking for
correctness. Of course, your server will need to be set up to handle unvalidated data, but best practices
dictate that this should be the case at all times.
Building an Application with HTML5 Forms
Now, let’s use the tools we’ve described in this chapter to create a simple signup page which showcases
new features in HTML5 Forms. Turning back to our familiar Happy Trails Running Club, we’ll create a
page for race registration that incorporates new form elements and validation.
185