html5 oninvalid doesn't work after fixed the input field

Question

I have this input code in my form:

Answer 1

If you set a value with setCustomValidity() then the field is invalid. That is setting a non-zero length string causes the browser to consider the field invalid. In order to take effects of your new input you have to clear the custom validity. Simply you can use the following:

There is no need to use Javascript for this.