and then about 4 of these: Uncaught Type Error: Cannot read property 'add Event Listener' of null(…) Anyways, just thought I'd see if you knew why.Anyways, may just switch over to a wp plugin, but thought I'd try to sharpen up my development skills a little lol Cheers!
Not the prettiest solution, but functional in all browsers with Java Script enabled.The only hooks between them are the values for the form itself and the checkbox input element.Also gone are any globally defined functions or variables.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.Here you can see screen captures from Firefox and Chrome: Text alert messages are generated entirely by the browser and will even translate automatically into different languages - something that would be almost impossible using just Java Script.The event handler on the checkbox then toggles the error message.
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.
Basically, when the checkbox is happy, the label is happy.
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.
If you're using Safari or another unsupporting browsers all the examples will just display the Java Script alert box.
As you would hope it is possible to customise the messages that are displayed by the browser with your own text, but this can only be done via Java Script.
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.