Me gustaría agregar un detector de eventos para cuando un usuario intenta enviar un <formulario> que tiene errores de validación.
¿Hay alguna forma de hacerlo de forma fiable y accesible?
Soluciones que consideré (ninguna de ellas es buena):
Agregando el detector de eventos 'enviar' a <formulario>.
Esto no funciona ya que 'enviar' solo se activa para formularios válidos.
Los elementos HTML <input> que tienen errores de validación activan un evento 'no válido' cuando el usuario intenta enviar un formulario.
El evento no burbujea, así que no puedo escucharlo así: form.addEventListener('invalid', callback);
Por lo tanto, escuchar el evento 'no válido' requiere agregar un detector de eventos 'no válido' para cada <entrada> dentro del formulario cuando se crea ese campo. Es fácil olvidarse de agregar un detector de eventos a un campo, ya que los campos se crean dinámicamente en muchos archivos .js y .tsx diferentes, por lo que esta solución es propensa a errores y está lejos de ser ideal.
Escuchando el evento 'clic' en el botón de envío y en la devolución de llamada verificando si form.checkValidity() es falso.
Esta solución tampoco es ideal, ya que el software de lectura de pantalla y otras tecnologías de asistencia no activarán necesariamente el evento 'clic' al intentar enviar el formulario.
¿Hay alguna buena manera de saber si un usuario intenta enviar un formulario no válido?
Estoy bien con una solución que involucre React, jQuery o JavaScript nativo.
Si este problema no es bueno, considere mi caso de uso y diga si hay un enfoque alternativo:
Necesito agregar estilo a los campos de formulario no válidos solo después de que el usuario haya intentado enviar un formulario.