I would like to call a function for a number input, that checks if the given number is valid. My solution was to call the function using oninput in the html-tag:

<input id='tone_length_input_field' type="number" inputmode='decimal' pattern="\d*" min="0.1" max="5" step="0.1" oninput="toneLengthFieldInput(0.1, 5)">

This is the javascript-function I am calling:

function toneLengthFieldInput(min, max) {
    var input = document.getElementById('tone_length_input_field').value;
    if ((input >= min) && (input <= max)) {
        document.getElementById('tone_length_slider').value = input;
        localStorage.setItem('toneLengthEx2', input);
    } else {
        alert('please enter a value between 0.1 and 5');
    }
}

However, if I want to delete the value of the input field and type in a new one, the function is called when I delete the current value and since no value is invalid I get the error message before I can type in a new one.

Is there a way to only call the function after I am finished typing in the input field? Thanks a lot for your help :)