HTML and CSS Reference
In-Depth Information
Validation
The next feature that we will add is an essential feature of any form based web application:
form validation.
JavaScript has been used to perform field validation since it first appeared in browsers; in
fact it was probably the feature JavaScript was used for the most in its early years.
Client side validation remains an important use of JavaScript, but as mentioned earlier in
the topic, HTML5 now contains a specification for form validation based on form attributes.
This validation is intended to remove the need for JavaScript validation.
Although it may not be obvious, this has actually been implemented by default by adding
the
required
attributes to our input fields. If you press enter in the “Task” field without en-
tering any input you should see the following:
The message “Please fill out this field” is generated by HTML5 validation.
Despite the presence of HTML5 validation, we will not use it in this web application for two
main reasons:
1. All browsers do not support HTML5 validation; therefore it is necessary to rely on a poly-
fill for browsers that do not provide support.
2. HTML5 validation does not play as nicely with JavaScript as you would expect. For in-
stance, we can not cause the HTML5 validators to fire by calling submit() in JavaScript,
they will only fire if the user clicks a submit button to post data to the server, or on a field
by field basis when the user presses enter in the field. Since we will never post data to the
server this is not helpful.
For these reasons, we will use the jQuery Validation library in this application. This can be
downloaded from here:
