Свойство ValidityState: tooShort

Только для чтения tooShort свойство интерфейса ValidityState указывает, меньше ли значение <input>, <button>, <select>, <output>, <fieldset> или <textarea>, после редактирования пользователем, минимальной длины кодовой единицы, установленной атрибутом элемента minlength.

Булево значение, которое является true если значение ValidityState не соответствует ограничениям.

В следующем примере проверяется валидность элемента текстового элемента ввода. Ограничение было добавлено с помощью атрибута minlength, поэтому вход ожидает строку с минимумом 4 символов. Если пользователь введёт строку, которая слишком короткая, элемент не проходит проверку на соответствие ограничениям и к нему применяются стили, соответствующие псевдоклассу CSS :invalid.

input:invalid {
  outline: red solid 3px;
}

<pre id="log">Validation logged here...</pre>
<input type="text" id="userText" minlength="4" />

const userInput = document.getElementById("userText");
const logElement = document.getElementById("log");

function log(text) {
  logElement.innerText = text;
}

userInput.addEventListener("input", () => {
  userInput.reportValidity();
  if (userInput.validity.tooShort) {
    log("Not enough characters entered.");
  } else {
    log("Input is valid…");
  }
});

• Руководство: Валидация ограничений
• Урок: Валидация данных формы