HTML el atributo: minlength

El atributo minlength define el número mínimo de caracteres (como unidades de código UTF-16) que el usuario puede ingresar en un <input> o <textarea>. Debe ser un valor entero 0 o superior. Si no se especifica una longitud mínima o se especifica un número no válido, el <input> no tiene una longitud mínima. Este valor debe ser menor o igual que el valor de maxlength; de lo contrario, el valor nunca será válido, puesto que es imposible cumplir con ambos criterios.

El <input> fallará la restricción de validación si la longitud del valor de texto del campo es menor que la longitud mínima de unidades de código UTF-16, con validityState.tooShort devolviendo true. La validación de la restricción solo se aplica cuando el usuario cambia el valor. Una vez que el envío falla, algunos navegadores mostrarán un mensaje de error que indica la longitud mínima requerida y la longitud actual.

Ejemplos

Al agregar minlength="5", el valor debe estar vacío o tener cinco caracteres o más para ser válido.

html
<label for="fruit"
  >Ingresa un nombre de fruta que tenga al menos 5 letras</label
>
<input type="text" minlength="5" id="fruit" />

Podemos usar pseudoclases para estilizar el elemento en función de si el valor es válido. El valor será válido siempre que sea null (vacío) o tenga cinco o más caracteres. Lima no es válido, limón es válido.

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

Especificaciones

Specification
HTML
# attr-input-minlength
HTML
# attr-textarea-minlength

Compatibilidad del navegador

html.elements.input.minlength

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
minlength

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

html.elements.textarea.minlength

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
minlength

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

Ve también