HTML5 and validation of programmatically submitted form

Question

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

when I submit the form using its submit button the validation works OK
when try to submit form programmatically using jQuery submit() function it gets submitted and validation does not seem to work.
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?

Your .submit() does actually not submit in your fiddle, because you've set the ID of the submit button to submit. api.jquery.com/trigger/#comment-134514715 — pimvdb
– pimvdb, Commented Jun 21, 2011 at 16:36
In addition, you might want to change the id of your submit input to something else apart from 'input'. — Perception
– Perception, Commented Jun 21, 2011 at 16:40
OK I changed the id of the form button and the id of the form - behavior is the same — kwicher
– kwicher, Commented Jun 21, 2011 at 16:40

Leif · Accepted Answer · 2011-06-21 16:43:38Z

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.

answered Jun 21, 2011 at 16:43

Leif

2,1702 gold badges15 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Community · Accepted Answer · 2017-05-23 12:27:46Z

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.

edited May 23, 2017 at 12:27

CommunityBot

11 silver badge

answered Nov 27, 2012 at 16:46

Boris Brdarić

4,7042 gold badges26 silver badges19 bronze badges

Collectives™ on Stack Overflow

HTML5 and validation of programmatically submitted form

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related