Peter Lubbers - Pro HTML 5 Programming

188
CHAPTER 7 ■ USING THE HTML5 FORMS API
0%
Notes:
In our final section of controls, we create a slider for the user to express his or her confidence in
completing the race. For this, we use an input of type range. Since our confidence is measured in
percentages, we set a minimum, a maximum, and step value on the input. These force a constraint within
normal percentage ranges. Additionally, we constrain the movement of the value to 5% step increments,
which you will be able to observe if your browser supports a range slider interface control. Although it
should not be possible to trigger them through simple control interactions, there are possible validation
constraints on this control for rangeUnderflow, rangeOverflow, and stepMismatch.
Because a range control does not show a textual representation of its value by default, we will add
one in our application. The confidenceDisplay will be manipulated through the onchange handler of the
range control, but we’ll see that in action in just a minute.
Finally, we add a to contain any extra notes from the registrant. By setting a maxLength
constraint on the notes control, we allow it to achieve a tooLong constraint, perhaps if a lengthy value is
pasted into the field.
We finish off our control section with a submit button that will send in our form registration. In this
default example, the registration is not actually being sent to any server.
There are a few scripts we still need to describe: how we update our confidence slider display, and
how we will override the browser’s built-in form validation feedback. Although you might find the
browser’s default handling of form errors to be acceptable, it is always good to know your options.
function setConfidence(newVal) {
document.getElementById("confidenceDisplay").innerHTML = newVal + '%';
}
function invalidHandler(evt) {
// find the label for this form control
var label = evt.srcElement.parentElement.getElementsByTagName("label")[0];
}
// set the label's text color to red
label.style.color = 'red';
// stop the event from propagating higher
evt.stopPropagation();
// stop the browser's default handling of the validation error
evt.preventDefault();
function loadDemo() {