HTML5 setCustomValidity oninvalid and oninput explanation


<input type="date" id="date" name="boking" required autocomplete="off"  oninvalid="this.setCustomValidity('Please enter the time')" oninput="setCustomValidity('')" />

Symptom: When an input field is triggered as invalid input, setCustomValidity(‘….’) will be fired and show the custom message. After correcting the value of the input, the result of validation is still an error.

Solution: oninput=”setCustomValidity(”)” is used to clear the result after each input.

Explanation from