ValidityState: свойство tooLong

Только для чтения tooLong свойство интерфейса ValidityState указывает, превышает ли значение <input> или <textarea>, после редактирования пользователем, максимальную длину кодовых единиц, установленную атрибутом элемента maxlength.

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

В следующем примере проверяется корректность элемента textarea. Ограничение добавлено с помощью атрибута maxlength, поэтому textarea ожидает максимум 10 символов. Если в textarea слишком много символов (как показано ниже), элемент не проходит проверку на соответствие ограничениям, и применяются стили, соответствующие псевдоклассу CSS :invalid.

При редактировании textarea браузер не позволит пользователю добавлять символы, которые не соответствуют ограничениям по максимальному количеству символов, поэтому изначально разрешено только удаление символов. Символы новой строки нормализуются и считаются как один символ при расчете максимальной длины.

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

<pre id="log">Validation logged here...</pre>
<textarea name="story" id="userText" maxlength="10" rows="5">
It was a dark and


stormy night...
</textarea>

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

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

userInput.addEventListener("input", () => {
  userInput.reportValidity();
  if (userInput.validity.tooLong) {
    log("Too many characters in the textarea.");
  } else {
    log("Input is valid…");
  }
});

• Проверка ограничений
• Формы: Валидация данных формы