I’m writing some unit tests for an HTML 5 app that uses the HTML 5 form validation API. I’ve attached a submit event handler to the form that does some custom handling before serializing to JSON and passing it off to my server.
What I’ve discovered, though, is that if I initiate a jQuery submit() event on the form, even if it’s invalid, my submit handler still gets called.
Instead, I’d expect my event handler not to have been called because the form is invalid.
I’ve created a JSFiddle to demonstrate (tested in Chrome 20):
http://jsfiddle.net/jonbca/SYg4h/22/
So, what gives?
Triggering the “.submit()” handler simply does not have anything to do with the HTML5 form validation mechanism. That mechanism is really quite independent of JavaScript, and in fact it’s mostly unavailable from the DOM API. You can explicitly call “checkValidity()” on a form element, but that just returns a boolean result and does not do any of the visual form updates that happen when the user clicks a “submit” form control.
It’s important to keep in mind that many of the fancy HTML5 “smart markup” behaviors are designed to allow things to happen without the need for JavaScript.