HTML - addition of oninput overriding custom oninvalid message

Question

I have a form, which contains the following:

<td class="td_mid">
<input type=text class="form-control input_mid" name="offset" value="<?php if (isset($_POST['encode']) || isset($_POST['decode'])) { echo htmlspecialchars($_POST['offset']);} ?>" placeholder="Enter a number." pattern="[0-9]{0,3}" oninvalid="setCustomValidity('Please enter a number between 1 and 999.' oninput="setCustomValidity('')")"></td>

Before, I had it without oninput="setCustomValidity('')". When I don't have oninput="setCustomValidity('')", if I enter a value outside the range, it displays my error message as it should. However, if I enter a new number into the input, it doesn't recognize that the value has changed and considers it invalid.

When I add oninput="setCustomValidity('')", it doesn't display my custom error message. What gives? Is there a pure HTML solution to this?

Answer 1

Extending from comment:

You have a typo in your code. Change this

<input oninvalid="setCustomValidity('Please enter a number between 1 and 999.'
     oninput="setCustomValidity('')")">

to this

<input oninvalid="setCustomValidity('Please enter a number between 1 and 999.')"
     oninput="setCustomValidity('')">

Should fix the problem.