3.4 Client-Side Form Validation 61Figure 3.14 Opera displays an error message after an incorrect time input (in this case a viola-
tion of the “step” attribute)
If you would like to make error handling more interactive, you can use the new
HTML5 oninput event instead of the onchange event. Unlike onchange, which is
triggered when the field no longer has the focus, oninput is activated after ev-
ery changed character. The oninput event now does what you previously had to
program somewhat laboriously via the keyboard events keyup and keydown. An-
other advantage of oninput is that the event listener needs to be attached only
once to the whole form, not to each input element. So in our preceding example,
you could do without all the JavaScript code and change the form definition as
follows:
<form method=get oninput="this.checkValidity();"
action=checkValidity.html >
This means you forgo changing the borders and background color, but you sig-
nificantly shorten the source code. An immediate reaction to each keystroke can
be very helpful in some cases, but when filling in a form field, it is usually enough
if the content is checked after the field has been fully completed.
3.4.3 Error Handling with “setCustomValidity()”
If you feel that all the error handling methods introduced earlier are still not
quite enough, you can also program your own function for checking content.
In the following example, we define an input field with the type email, which