Solo quiero verificar si este es un caso de uso adecuado para usar { capture: true } o si hay una forma diferente de "mejor práctica" de hacer las cosas.

Tengo una página HTML que contiene un formulario y varias entradas de números dinámicos.

El mensaje predeterminado de Please enter a valid value. The two nearest valid values are 4 and 8. No es realmente adecuado, por lo que me gustaría personalizarlo.

Primero probé algo como:

 document.addEventListener('invalid', ({ target }) => target.setCustomValidity('Hours must be either 0, 4 or 8.')); document.addEventListener('input', ({ target }) => target.setCustomValidity(''));

Parece que esto no funciona porque el evento no invalid no burbujea.

El siguiente fue este:

 const hoursElements = Array.from(document.querySelectorAll('input[type="number"]')); hoursElements.forEach((element) => element.addEventListener('invalid', ({ target }) => target.setCustomValidity('Hours must be either 0, 4 or 8.'))); hoursElements.forEach((element) => element.addEventListener('input', ({ target }) => target.setCustomValidity('')));

Sin embargo, dado que la página es dinámica, tendría que seguir llamando a lo anterior cada vez que se agregaran nuevas entradas.

Finalmente encontré esto que funciona:

 const invalidEvent = ({ target }) => target.setCustomValidity('Hours must be either 0, 4 or 8.'); document.addEventListener('invalid', invalidEvent, { capture: true }); document.addEventListener('input', ({ target }) => target.setCustomValidity(''));