Peter Lubbers - Pro HTML 5 Programming

You can do this by calling:
valCheck.valid
CHAPTER 7 ■ USING THE HTML5 FORMS API
we can get a Boolean value which informs us whether or not all validity constraints are currently met on
this particular form control. Think of the valid flag as a summary: if all eight constraints are passing, the
valid flag will be true. Otherwise, if any of the validity constraints fail, the valid attribute will be false.
■ Note The ValidityState object is a live object. Once you grab a reference to it, you can keep a hold of it and
the validity checks it returns will update as needed when changes occur.
As mentioned before, there are eight possible validity constraints on any given form element. Each
can be accessed from the ValidityState by accessing the field with the appropriate name. Let’s look at
what they mean, how they can be enforced on a form control, and how you can use the ValidityState to
check for them:
The valueMissing Constraint
Purpose: Ensure that some value is set on this form control
Usage: Set the required attribute on the form control to true
Usage example:
Details: If the required attribute is set on a form control, the control will be in an invalid state unless the
user or a programmatic call sets some value to the field. For example, a blank text field will fail a required
check, but will pass as soon as any text is entered. When blank, the valueMissing will return true.
typeMismatch
Purpose: Guarantee that the type of the value matches expectations (number, email, URL, and so on)
Usage: Specify one of the appropriate type attributes on the form control
Usage example:
Details: Special form control types aren’t just for customized phone keyboards! If your browser can
determine that the value entered into a form control doesn’t conform to the rules for that type—for
example, an email address without an @ symbol—the browser can flag this control as having a type
mismatch. Another example would be a number field that cannot parse to a valid number. In either case,
the typeMismatch will return true.
patternMismatch
Purpose: Enforce any pattern rule set on a form control which details specific valid formats
Usage: Set the pattern attribute on the form control with the appropriate pattern
Usage example:
181