Form creation: input widgets, data binding, and data validation - HTML5 in Action - page 80

2.4.2. Detecting a failed form validation with the invalid event
When the user attempts to submit a form that uses HTML5 validation features, the sub-
mit event will only fire if the entire form has passed the validation tests. If you need to
detect when form validation has failed, you can listen for the new invalid event. This
event is fired when one of the following occurs:
• The user attempts to submit the form and validation fails.
• The checkValidity method has been called by the application and has re-
turned false .
Step 2: Detect order form validation failure
Let's add a listener to the invalid event in the order form. Add the following code dir-
ectly after the code from the previous listing.
Listing 2.12. app.js—Listening to the invalid event
The invalid event is useful if you want to apply styling to erroneous form fields on a
submitted form. You'll learn how to do that next.