oninvalid setCustomValidity Field will not validate after showing custom error message

When using the built in HTML5 form validation, I changed the error message that appears, but when the field is fixed, then error message keeps coming back and can not get the field to validate no matter what I do.

If the correct data is entered in the field initally, then it validates fine and the form will submit and continue.

But if I enter invalid data, then the custom error message will correctly show up on the field the first time, but even after the data is corrected, the error message will keep coming up everytime and prevent submission of form.

In this example code I am using a text input with pattern attribute to get a floating point number and a number input to get an integer.

<form>

Enter floating point nnumber: 
<input type='text' pattern='[0-9]*\.?[0-9]+' id='float-only' name='float-only' value=''>

Enter integer number: 
<input type='number' id='int-only' name='int-only' min='0' step='1' value=''>

</form>

<script>

document.getElementById('float-only').oninvalid = function(event) { event.target.setCustomValidity('Please enter valid FLOATING POINT number.'); }

document.getElementById('int-only').oninvalid = function(event) { event.target.setCustomValidity('Please enter valid INTEGER.'); }

</script>