I have a complex form with many different types of fields and a submit button. As far as I'm aware, a form can be submitted by clicking the submit button, by pressing Enter in certain form fields (for example text input fields), and on mobile devices by pressing the submit button on the on-screen keyboard. There may be more ways to submit the form that I'm not aware of.
I would like to register a separate (JavaScript) submit handler that applies when the form is submitted only within a certain section of the form. Pressing the submit button or submitting the form from a form field outside of the special section should call the regular submit handler, but submitting the form from a form field inside the special section should call another handler. One particular challenge in my case is that some of my form fields are rendered by third-party React components, and I don't have the possibility to control their DOM.
I could come up with ideas that go in the following directions:
submit event.form attribute on each input field within the special form group and point it to a separate form with its own submit button and submit event handler. I am assuming that this would produce the desired behaviour. Unfortunately, I cannot add this attribute to all input fields, since I don't control their DOM.keydown events with key set to Enter. The first problem is that pressing Enter only submits the form in certain cases. For example, pressing enter in a text input submits the form, but pressing enter in a textarea or a button input does not. In some cases such as a file input (which sometimes consists of a text field and a button) I'm not even sure and the behaviour between browsers is probably inconsistent. So I don't know under what conditions even to call the submit handler. The second problem is that I assume that this does not take other submission methods into consideration, such as the submit key on touch devices.Is there a good way to catch the form submission from within a certain section of the form only?