OnSubmit versus OnClick... but not the normal question

[LLLLLLL]

There are lots of form-validation discussions revolving around onsubmit versus onclick. This is not one of them, but it's related.

 

I noticed something like this:

 

<form method="post">
...
   <input type="submit" onclick="return validate_form()">
</form>

 

So there's no "onsubmit" validation for the form, but the button's onclick is calling the function instead. This isn't the recommended way to do this validation, so it is said, because someone can press "enter" in another input field of the form, thus bypassing the "onclick" event of the button.

 

But that's where my question comes in....

1) I am pressing enter in a text box

2) The "validate_form()" function is getting called anyway!

 

Why would that be? Is there now built-in logic to some browsers to do this? Any other reason?

 

Chrome's call stack shows that the onclick handler initiated the call to the function, but I pressed enter in a text box. So why did that handler get called?  (Chrome, IE, all the browsers do this.)

 

[nogray]

Newer browsers seem to trigger a click even when the user hit enter key on a form. However, older browsers dont (that's include IE8 and lower). So you should stick on the onsubmit event for now.

[LLLLLLL]

Right, like I said, browsers seem to do this. But is it documented somewhere? Is it just our imagination?

[Adam]

http://www.w3.org/TR/DOM-Level-3-Events/#event-flow-activation

 

An activation trigger is a user action or an event which indicates to the implementation that an activation behavior should be initiated. User-initiated activation triggers include clicking a mouse button on an activatable element, pressing the 'Enter' key when an activatable element has focus, or pressing a key that is somehow linked to an activatable element (a hotkey or access key) even when that element does not have focus. [...]

 

So yes, this is specified as correct DOM behaviour. I'm not sure when it was added, but it also existed in the previous spec (dated 31/05/2011).

 

Specification doesn't mean it's supported across the board though. Given that there's still people using 11 year old browsers, for the sake of 5 seconds to switch it to the other, correct event, I don't see why you wouldn't.

[LLLLLLL]

Cool, as long as it is documented. I just wanted to know what it was doing it. Clearly "onclick" isn't the way to go.

 

I wasn't clear from that DOM doc, if both onclick and onsubmit are declared, what gets processed first?

[Christian F.]

From what I can read, namely in this part:

...pressing the 'Enter' key when an activatable element has focus...

Then this is not the specified correct behaviour, as the OP was pressing ENTER when another element had focus.

 

That said, I just tested with Opera 12.00 and it displayed the same behaviour. More specifically, it seemed to shift the focus to the "submit" button when I pressed enter, thus activating onclick event as per the definition. Don't know if that is specified anywhere though, and I'm afraid I don't have time to read up at the moment. 

[LLLLLLL]

Marking as solved because I have enough info. It does seem like more info is needed in general documentation, and/or testing of the order of events. I don't have time to look into these things right now.

 

But at least I know that it hits onclick because there's a spec for it.

[Adam]

I wasn't clear from that DOM doc, if both onclick and onsubmit are declared, what gets processed first?

 

Click will trigger first. When an event is triggered, it propagates up through the DOM tree. So when the click happens, it will be first matched on the input, but will then begin to travel up the DOM tree until it finds the form element with the submit event:

 

http://jsfiddle.net/kdrxD/

 

In this 'chain of events', we could bind clicks to any number of elements sitting between the input and form in the tree, and each would be triggered from deepest element up:

 

http://jsfiddle.net/XhXwu/

 

Not the bind orders too, they're completely irrelevant in this case.

 

What I believe the spec I quoted before is saying, is that the events bound to elements further up the DOM tree that could be deemed the same action should trigger the same event(s). So a click on the submit event, fires the same submit event.

[Adam]

So a click on the submit event, fires the same submit event.

 

I meant, a click on the submit button, should trigger the submit event on the form.