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.
Advertisement
Answer
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