I tried to hook into the invalid event for numeric input (which is required), and while the invalid event fires right on loading the page (as all the cells are empty), it does not refire if one fills an input field and removes its content or inputs a letter instead of a number. But I could not find anything indicating that this would be its behaviour. But at the same time I can also not find an issue with my code. So I guess I am first asking what the desired behaviour is before I continue hunting for bugs.
As specified in the documentation:
When a form is submitted, invalid events are fired at each form control that is invalid
So when a form is submitted, any input that doesn't adhere to it's constraints, will fire an invalid event.
Here the input is numeric and requires a min of 1. Setting it to 0 and submitting will trigger the invalid event.
document.querySelector('input[type="number"]').addEventListener('invalid', () => {
console.log('invalid')
})<form action="#">
<input type="number" min="1" value="0">
<input type="submit">
</form>Apparently rubber ducking is quite helpful:
The invalid event only fires on form submission, while the css :invalid styling is applied live on input events rather than only after submission events.
If a form is submitted with an invalid value, the submittable elements are checked and, if an error is found, the invalid event will fire
https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/invalid_event