setCustomValidity "Empty"

Question

Я пытаюсь установить setCustomValidity, когда входное значение пусто, оно работает, но проблема в том, что всплывающее окно с ошибкой продолжает показывать сообщение (когда ввод находится в фокусе) ...

function chec() {
	inn = document.getElementById('num');
	if (inn.value == "") {
		inn.setCustomValidity("Empty");
	} else {
		inn.setCustomValidity("");
	}
}

<form>
<input type="number" id="num" min="20" max="50" required>
<input type="submit" onclick="chec()">
</form>

Answer 1

<form>
<input type="number" id="num" min="20" max="50" required oninvalid="setCustomValidity('Empty')" 
   oninput="setCustomValidity('')" />
<input type="submit">
</form>

Я создал версию, которая работает без использования внешней функции. Вы можете в конечном итоге разделить свои функции, но в итоге результат будет таким же. Дайте мне знать, если это сработало, пожалуйста.