minlength атрибут HTML

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

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

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

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

Попробуйте

<label for="name">Product name:</label>
<input
  id="name"
  name="name"
  type="text"
  value="Shampoo"
  minlength="3"
  maxlength="20"
  required />

<label for="description">Product description:</label>
<textarea
  id="description"
  name="description"
  minlength="10"
  maxlength="40"
  required></textarea>

label {
  display: block;
  margin-top: 1em;
}

input:valid,
textarea:valid {
  background-color: palegreen;
}

Примеры

При добавлении 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);
}

Спецификации

Совместимость с браузерами

html.elements.input.minlength

html.elements.textarea.minlength

См. также

• maxlength
• size
• pattern
• Проверка ограничений
• Проверка данных формы
• <input>