Tengo un formulario complejo con muchos tipos diferentes de campos y un botón de envío. Hasta donde yo sé, se puede enviar un formulario haciendo clic en el botón Enviar, presionando Entrar en ciertos campos de formulario (por ejemplo, campos de entrada de texto) y en dispositivos móviles presionando el botón Enviar en el teclado en pantalla. Puede haber más formas de enviar el formulario que no conozco.

Me gustaría registrar un controlador de envío separado (JavaScript) que se aplique cuando el formulario se envíe solo dentro de una determinada sección del formulario. Presionar el botón Enviar o enviar el formulario desde un campo de formulario fuera de la sección especial debería llamar al controlador de envío normal, pero enviar el formulario desde un campo de formulario dentro de la sección especial debería llamar a otro controlador. Un desafío particular en mi caso es que algunos de mis campos de formulario son generados por componentes React de terceros, y no tengo la posibilidad de controlar su DOM.

Se me podrían ocurrir ideas que vayan en las siguientes direcciones:

• Averigüe de alguna manera desde qué elemento del formulario se envió el formulario y verifique si ese elemento está dentro de la sección especial. El problema es que no he podido encontrar una manera de detectar el campo de formulario de origen en el evento de submit .
• Utilice formularios anidados y coloque el grupo de formularios especiales en su propio formulario con su propio botón de envío y controlador de eventos de envío. El problema es que parece que no hay una forma compatible de anidar formularios en HTML.
• Use el atributo de form en cada campo de entrada dentro del grupo de formulario especial y apúntelo a un formulario separado con su propio botón de envío y controlador de eventos de envío. Supongo que esto produciría el comportamiento deseado. Desafortunadamente, no puedo agregar este atributo a todos los campos de entrada, ya que no controlo su DOM.
• Reacciona a los eventos de keydown de teclas con la key configurada en Enter . El primer problema es que al presionar Enter solo se envía el formulario en ciertos casos. Por ejemplo, al presionar Intro en una entrada de text envía el formulario, pero al presionar Intro en un área de texto o en una entrada de button no se envía. En algunos casos, como la entrada de un file (que a veces consiste en un campo de texto y un botón), ni siquiera estoy seguro y el comportamiento entre navegadores probablemente sea inconsistente. Así que no sé bajo qué condiciones llamar al controlador de envío. El segundo problema es que asumo que esto no tiene en cuenta otros métodos de envío, como la tecla de envío en dispositivos táctiles.

¿Hay una buena manera de capturar el envío del formulario solo desde una determinada sección del formulario?