Not the prettiest solution, but functional in all browsers with Java Script enabled.Adding HTML5 validation to the checkbox is actually very simple.There are also clever ways of styling the label to look like a checkbox and hiding the actual checkbox so you can use your own graphic, font icon or CSS creation: , but actually toggling the checkbox in the background.
Also gone are any globally defined functions or variables.
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.
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 only hooks between them are the values for the form itself and the checkbox input element.
When the checkbox is valid (checked) the message is set to blank which tells the browser that it's ok for the form to be submitted.