El atributo “minlength” solo está permitido cuando el tipo de input es “email”, “password”, “search”, “tel”, “text”, o “url”.

El atributo minlength define el número mínimo de caracteres (como unidades de código UTF-16) que un usuario puede introducir en un campo de entrada basado en texto. Proporciona validación integrada del lado del cliente sin necesidad de JavaScript. Sin embargo, solo tiene sentido en tipos de input donde el usuario está escribiendo texto de forma libre. Para tipos de input como number, date, color, range, o checkbox, el concepto de longitud mínima de caracteres no aplica — estas entradas tienen sus propios formatos de valor restringidos o usan otros atributos como min y max para la validación.

Cuando el validador W3C encuentra minlength en un tipo de input no admitido, marca el atributo como inválido. Los navegadores típicamente ignorarán el atributo silenciosamente, lo que significa que tu validación prevista no funcionará realmente. Esto puede llevar a una falsa sensación de seguridad donde crees que la entrada está siendo validada cuando no es así.

El valor de minlength debe ser un número entero no negativo (0 o mayor) y debe ser menor o igual a maxlength si ambos están especificados. El atributo minlength también funciona en elementos <textarea>.

Ejemplos

❌ Incorrecto: minlength en un input de tipo number

El tipo de input number no admite minlength. Si quieres establecer un valor mínimo, usa el atributo min en su lugar.

<label for="age">Introduce tu edad</label>
<input type="number" minlength="1" id="age">

✅ Solucionado: usando min para inputs de tipo number

<label for="age">Introduce tu edad</label>
<input type="number" min="1" id="age">

❌ Incorrecto: minlength en un input de tipo date

<label for="start-date">Fecha de inicio</label>
<input type="date" minlength="10" id="start-date">

✅ Solucionado: eliminar minlength de inputs de tipo date

Los inputs de fecha tienen un formato controlado por el navegador, por lo que las restricciones de longitud de caracteres no aplican. Usa min y max para restringir el rango de fechas.

<label for="start-date">Fecha de inicio</label>
<input type="date" min="2024-01-01" id="start-date">

✅ Correcto: minlength en tipos de input admitidos

Aquí tienes usos válidos de minlength en todos los tipos de input admitidos:

<label for="username">Nombre de usuario (al menos 3 caracteres)</label>
<input type="text" minlength="3" id="username">

<label for="email">Email</label>
<input type="email" minlength="5" id="email">

<label for="pass">Contraseña (al menos 8 caracteres)</label>
<input type="password" minlength="8" id="pass">

<label for="phone">Número de teléfono</label>
<input type="tel" minlength="7" id="phone">

<label for="query">Búsqueda</label>
<input type="search" minlength="2" id="query">

<label for="website">URL del sitio web</label>
<input type="url" minlength="10" id="website">

✅ Correcto: minlength con maxlength en un textarea

<label for="bio">Biografía (entre 10 y 200 caracteres)</label>
<textarea minlength="10" maxlength="200" id="bio"></textarea>

Referencia rápida

Más información:

MDN Reference

MDN: minlength attribute

→