HTML5 and validation of programmatically submitted form

I was trying to figure out for some time what is happening with my validation of the HTML5 form and I noticed that:

1. when I submit the form using its submit button the validation works OK
2. when try to submit form programmatically using jQuery submit() function it gets submitted and validation does not seem to work.
3. when I trigger the submit button of the form programmatically, validation works

It is consistent in all OSX browsers (FF5, O11, Chr13) but Safari 5, which actually does not validate in neither of the cases.

Here is the jsFiddle to 开发者_开发百科test.

Why the second option does not work?

Seems like the submit button has to be triggered somehow. This would not surprise, since the browser also does not fire a change event, when one changes the value of a text input via js.

I 've done some tests, and it seems that form is validated and submitted triggered by click event on first <input type="submit" /> element in form.

Absolutely same thing happens when your focus is in the form (for example in some input element) and you press enter. That's the way browsers handle form submitting and I agree that's a bit odd.

It seems that you can programmatically run html5 validation by using HTML5 Constraint API but be aware of browser support.

Do any browsers yet support HTML5's checkValidity() method?

Also there are some JavaScript libraies to help you with that.

• https://github.com/dpatru/checkValidity

• http://ericleads.com/h5validate/