Game Development Reference
In-Depth Information
•
readonly
(acceptable values include
readonly
,
""
, or empty): Speci-
fies that the value of this element cannot be changed by the user.
•
required
(acceptable values include
required
,
""
, or empty): Speci-
fies that this element must have a valid value in order for the form to be
allowed to submit.
•
value
(value must be a string with no line feed or carriage return char-
acter): Specifies the actual url represented by this element.
Form validation
Although a form submission will automatically validate data inserted into the form
and alert the user of any possible errors, there is a nicely defined API that gives us
much more control over the validation process and reporting, than just the default.
Validity state object
Each
form
element has an object attached to it of type
ValidityState
, which con-
tains a list of properties related to the validation status of that node. You can access
this object directly from a
form
element and inspect its properties manually:
var firstName = document.querySelector("#myForm
input[name='firstName']");
//firstName.validity == ValidityState {
valid : false,
customError : false,
badInput : false,
stepMismatch : false,
rangeOverflow : false,
rangeUnderflow : false,
tooLong : false,
patternMismatch : false,
typeMismatch : false,
valueMissing : false
}
With these properties, we're able to inspect each
form
element and really customize
the validation routine for the form. However, seeing that automatic validation is such