5

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?

Cœur
  • 37,241
  • 25
  • 195
  • 267
kwicher
  • 2,092
  • 1
  • 19
  • 28
  • 1
    Your `.submit()` does actually not submit in your fiddle, because you've set the ID of the submit button to `submit`. http://api.jquery.com/trigger/#comment-134514715 – pimvdb Jun 21 '11 at 16:36
  • In addition, you might want to change the id of your submit input to something else apart from 'input'. – Perception Jun 21 '11 at 16:40
  • OK I changed the id of the form button and the id of the form - behavior is the same – kwicher Jun 21 '11 at 16:40

2 Answers2

1

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.

Community
  • 1
  • 1
Boris Brdarić
  • 4,674
  • 2
  • 24
  • 19
1

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.

Leif
  • 2,143
  • 2
  • 15
  • 26