Атрибут HTML: minlength

Атрибут minlength определяет минимальную длину строки, которую пользователь может ввести в <input> или <textarea>. Атрибут должен иметь целочисленное значение 0 или больше.

Длина измеряется в единицах кода UTF-16, которые (для большинства сценариев) эквивалентны количеству символов. Если minlength не указан или указано недопустимое значение, у поля ввода нет минимальной длины. Это значение должно быть меньше или равно значению maxlength, в противном случае значение никогда не будет валидным, так как невозможно выполнить оба условия.

Ввод не пройдет валидацию ограничений, если длина текстового значения поля меньше minlength единиц кода UTF-16, с validityState.tooShort возвращающим true. Валидация ограничений применяется только при изменении значения пользователем. После неудачной отправки некоторые браузеры отобразят сообщение об ошибке, указывающее требуемую минимальную длину и текущую длину.

minlength не подразумевает required; поле ввода нарушает ограничение minlength только если пользователь ввёл значение. Если поле ввода не required, пустая строка может быть отправлена, даже если minlength задано.

Добавив minlength="5", значение должно быть пустым или содержать пять или более символов, чтобы быть валидным.

<label for="fruit">Enter a fruit name that is at least 5 letters long</label>
<input type="text" minlength="5" id="fruit" />

Мы можем использовать псевдоклассы для стилизации элемента в зависимости от того, является ли значение валидным. Значение будет валидным, если оно равно null (пустое) или содержит пять или более символов. Lime не валидно, lemon — валидно.

input {
  border: 2px solid currentcolor;
}
input:invalid {
  border: 2px dashed red;
}
input:invalid:focus {
  background-image: linear-gradient(pink, lightgreen);
}

• maxlength
• size
• pattern
• Валидация ограничений
• Валидация форм
• <input>