Listen for changes of input validity state reliable

Question

Can I listen to changes of ValidityState of an input element reliable? It seems that not in all cases an event is fired.

• invalid event is only fired when element enters the invalid state. It is not fired when the reason for invalid state changes (e.g. from valueMissing to badInput).
• input event is only fired when user enters a valid input. If user enters an invalid input (e.g. partially filled time input) the event is not fired.

I run into this issue with <input type="time">. I noticed two scenarios, in which the application is not notified about a change of the validity state:

1. <input type="time" required> is invalid due to valueMissing and changes to be invalid due to badInput when user partially fills it.
2. <input type="time"> is invalid due to badInput and user clear the input causing the input to get valid again without a change of the value.

I'm trying to render the validation message with custom styling. But as I'm not able to listen to all potential changes of InputElemen.validity and InputElement.validationMessage the rendered validation message and the validity state of the element may get out of sync.

You can reproduce it playing with this JSFiddle: https://jsfiddle.net/h4efs9y6/ You will notice that the validation message rendered by JavaScript and the validation message shown by the browser gets out of sync in some cases.