When the checkbox is not checked and the Submit button is clicked an alert is displayed similar to the examples above, but using our text instead of the default.
Here you can see the custom message being displayed in Firefox: Custom messages can be set in a similar manner for object states (validity.value Missing, validity.pattern Mismatch, ...) to determing the right message. The previous example was starting to become a bit cluttered with two Java Script script blocks as well as the The forms behaviour should be unchanged: While it looks much more complicated, this is a better solution because it allows for the HTML and Java Script to be maintained separately.
The Java Script can now be moved to a separate file, or converted to a code library allowing for it to be reused with other forms.
The attribute on checkboxes is supported in Internet Explorer 10 and most/all other browsers exept for Safari which ignores the requirement.
Some, but not all, browsers will recognise and enforce this: The advantage of the HTML5 form validation is that it happens before our Java Script is called, displays instructions and points the user to the relevant element.