HTML-достоверность ввода не проверяется при изменении значения в Javascript

Question

У меня есть текстовый ввод с minlength.Когда пользователь вводит текст, состояние ввода validity обновляется немедленно.Если я изменю значение в коде, состояние достоверности будет сброшено, чтобы оно показывалось как действительное - даже при нарушении ограничения validity.valid равно true.

const input = document.getElementById("input");
const label = document.getElementById("label");
document.getElementById("rightButton").addEventListener("click", evt => {
  input.value = "ABCDE";
});
document.getElementById("wrongButton").addEventListener("click", evt => {
  input.value = "AB";
});

setInterval(() => label.innerHTML = input.validity.valid, 250);

<input type="text" id="input" minlength="4">
<span id="label"></span>
<hr/>
<button id="rightButton">Make It Right</button>
<button id="wrongButton">Make It Wrong</button>

(NB: stacksnippets.net, кажется, сейчас не работает, но вышеизложенное иллюстрирует мою проблему.)

Почему не действует автоматическая проверкапроверка запускается, когда я назначаю input.value?Это где-то задокументировано?Есть ли метод, который я могу вызвать, чтобы вызвать внутренний процесс проверки браузера, вместо того, чтобы выполнять свои собственные проверки и вызывать setCustomValidity?

Answer 1

Использование pattern - разумный подход к решению моей проблемы, и вся заслуга Суджила за то, что он побудил меня понять, что именно здесь происходит. Я просто хотел уточнить для любых будущих читателей с этой проблемой.

От спецификация для minlength (выделено мое):

Если элемент имеет минимально допустимую длину значения, его флаг грязного значения равен true, его значение было последнее изменение было изменено пользователем (в отличие от изменения, сделанного сценарием), его значение равно не пустая строка, а длина кодовой единицы значения элемента меньше минимально допустимой длины значения элемента, тогда элемент страдает от слишком короткого значения.

Этот язык («последний измененный пользователем при редактировании») также указан в спецификации для maxlength, но не для каких-либо других ограничений. Вот почему не существует метода «принудительной проверки», потому что все ограничения применяются постоянно, , за исключением этих двух. Я не уверен почему, но это очень понятно и универсально реализовано.

Answer 2

В вашем случае вам нужно использовать pattern в качестве элемента ввода. По сути, содержимое шаблона является регулярным выражением. В приведенном ниже коде .{4,} означает подтверждение для 3 или более символов.

const input = document.getElementById("input");
const label = document.getElementById("label");
document.getElementById("rightButton").addEventListener("click", evt => {
  input.value = "ABCDE";
});
document.getElementById("wrongButton").addEventListener("click", evt => {
  input.value = "AB";
});

setInterval(() => label.innerHTML = input.validity.valid, 250);

<input type="text" pattern=".{4,}"  id="input">
<span id="label"></span>
<hr/>
<button id="rightButton">Make It Right</button>
<button id="wrongButton">Make It Wrong</button>