¿Hay un atributo de validación de longitud mínima en HTML5?

608

Parece que el minlengthatributo de un <input>campo no funciona.

¿Hay algún otro atributo en HTML5 con cuya ayuda pueda establecer la longitud mínima de un valor para los campos?

html html5-validation emilan
fuente
3
No será la respuesta para cada campo, pero si solo quiere asegurarse de que haya un valor, puede usar el atributo "requerido". <input type = "text" name = "input1" required = "required" />
Ninguno
1
Posible duplicado: stackoverflow.com/questions/5533053/textarea-character-limit/…
Web_Designer
77
No existe, ¡pero hagamos un escándalo y entremos! w3.org/Bugs/Public/show_bug.cgi?id=20557
Eric Elliott
Debe usar JS / Jquery si desea realizar una implementación completa (p. Ej., Requerido, longitud mínima, mensaje de error al enviar, etc.). Safari todavía no es totalmente compatible con el atributo requerido, y solo Chrome y Opera son compatibles con minLength. Por ejemplo, consulte caniuse.com/#search=required
rmcsharry

Respuestas:

1326

Puedes usar el patternatributo . El requiredatributo también es necesario; de lo contrario, un campo de entrada con un valor vacío se excluirá de la validación de restricción .

<input pattern=".{3,}"   required title="3 characters minimum">
<input pattern=".{5,10}" required title="5 to 10 characters">

Si desea crear la opción de usar el patrón para "vacío o longitud mínima", puede hacer lo siguiente:

<input pattern=".{0}|.{5,10}" required title="Either 0 OR (5 to 10 chars)">
<input pattern=".{0}|.{8,}"   required title="Either 0 OR (8 chars minimum)">
usuario123444555621
fuente
139
+1 por usar html5 en lugar de jQuery. Solo quería agregar que el atributo de título le permite configurar el mensaje para que se muestre al usuario si no se cumple el patrón. De lo contrario, se mostrará un mensaje predeterminado.
Ninguno
11
@ J.Money Todavía dice "Haga coincidir el formato solicitado: <título>". ¿Hay alguna forma de omitir el mensaje predeterminado anterior?
CᴴᴀZ
59
Lamentablemente, esto no es compatible con las áreas de texto .
ThiefMaster
27
@ChaZ @Basj Puede agregar un mensaje de error personalizado agregando el siguiente atributo:oninvalid="this.setCustomValidity('Your message')"
bigtex777
66
Si ingresa una entrada no válida y la está usando setCustomValidity, continuará mostrándole el mensaje de error incluso después de corregir la entrada. Puede usar el siguiente onchangemétodo para contrarrestar esto. oninvalid="this.setCustomValidity('Field must contain min. 5 characters')" onchange="try{setCustomValidity('')}catch(e){}"
sohaiby
154

No es una minlengthcaracterística en HTML5 especificaciones ahora, así como la validity.tooShortinterfaz.

Ambos están ahora habilitados en versiones recientes de todos los navegadores modernos. Para más detalles, consulte https://caniuse.com/#search=minlength .

rhgb
fuente
1
Firefox 44 y aún no está implementado.
Christian Læirbag
2
Todavía no es compatible fuera de Chrome u Opera. caniuse.com/#search=minlength
rmcsharry
Es enero de 2017 y aún solo Chrome y Opera admiten minlength
TrojanName
2
@TrojanName Firefox admite minlengthatributos desde la versión 51 .
Luca Detomi
16
Los comentarios periódicos para actualizar el estado de esta respuesta de desbordamiento de pila son menos útiles que decirle a la gente que consulte aquí para obtener información actual: caniuse.com/#search=minlength
chadoh
19

Aquí hay una solución solo para HTML5 (si desea validación de longitud mínima 5, longitud máxima 10 caracteres)

http://jsfiddle.net/xhqsB/102/

<form>
  <input pattern=".{5,10}">
  <input type="submit" value="Check"></input>
</form>
Ali Çarıkçıoğlu
fuente
3
¿Cómo configurar un mensaje de error personalizado si el campo no está bien?
Basj
2
Para el mensaje personalizado, agregue el titleatributo con el mensaje requerido.
Shlomi Hassid
8
La misma patternrespuesta se ha dado unos meses antes . ¿Cómo es mejor esta respuesta?
Dan Dascalescu
@DanDascalescu No tenía etiquetas de formulario y una explicación clara. También incluí una demostración de jsfiddle en funcionamiento. (por cierto, las reglas de Stackoverflow dicen que no está prohibido dar respuestas similares siempre que sea útil para la comunidad)
Ali Çarıkçıoğlu
Una forma de dar una respuesta aún mejor es incluir la demostración aquí en SO como un fragmento de código ejecutable .
Dan Dascalescu
11

Sí, ahí está Es como la longitud máxima. Documentación de W3.org: http://www.w3.org/TR/html5/forms.html#attr-fe-minlength

En caso de minlengthque no funcione, use el patternatributo mencionado por @ Pumbaa80 para la inputetiqueta.

Para textarea: Para configurar max; use maxlengthy por min vaya a este enlace .

Aquí encontrará tanto para máx. Como para mín.

SohelAhmedM
fuente
8

Utilicé maxlength y minlength con o sin requiredy me funcionó muy bien para HTML5.

<input id="passcode" type="password" minlength="8" maxlength="10">
Expandir fragmento

``

benaff033
fuente
6

El atributo minLength (a diferencia de maxLength) no existe de forma nativa en HTML5. Sin embargo, hay algunas formas de validar un campo si contiene menos de x caracteres.

Se da un ejemplo usando jQuery en este enlace: http://docs.jquery.com/Plugins/Validation/Methods/minlength

<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <script type="text/javascript" src="http://jzaefferer.github.com/jquery-validation/jquery.validate.js"></script>
<script type="text/javascript">
jQuery.validator.setDefaults({
    debug: true,
    success: "valid"
});;
</script>

  <script>
  $(document).ready(function(){
    $("#myform").validate({
  rules: {
    field: {
      required: true,
      minlength: 3
    }
  }
});
  });
  </script>
</head>
<body>

<form id="myform">
  <label for="field">Required, Minimum length 3: </label>
  <input class="left" id="field" name="field" />
  <br/>
  <input type="submit" value="Validate!" />
</form>

</body>
</html>
Valéry Stroeder
fuente
1
"El atributo minLength (a diferencia de maxLength) no existe de forma nativa en HTML5" Sí, sí: w3.org/TR/html5/…
mikemaccana
Todavía no es compatible fuera de Chrome u Opera. caniuse.com/#search=minlength
rmcsharry
5

No HTML5, pero práctico de todos modos: si usa AngularJS , puede usarlo ng-minlengthtanto para entradas como para áreas de texto. Ver también este Plunk .

mik01aj
fuente
Si Angular se escribió para cumplir con los estándares , habrían utilizado algo como, data-ng-minlengthpero ¿por qué un desarrollador se preocuparía por los estándares? > __>
John
44
Estimado seguidor estándar, se puede utilizar data-ng-minlengthasí .
mik01aj
4

Mi solución para textarea usando jQuery y combinando HTML5 requirió validación para verificar la longitud mínima.

minlength.js

$(document).ready(function(){
  $('form textarea[minlength]').on('keyup', function(){
    e_len = $(this).val().trim().length
    e_min_len = Number($(this).attr('minlength'))
    message = e_min_len <= e_len ? '' : e_min_len + ' characters minimum'
    this.setCustomValidity(message)
  })
})

HTML

<form action="">
  <textarea name="test_min_length" id="" cols="30" rows="10" minlength="10"></textarea>
</form>
Hiep Dinh
fuente
Muy útil y elegante respuesta!
Silvio Delgado
4

minlengthEl atributo ahora es ampliamente compatible en la mayoría de los navegadores .

<input type="text" minlength="2" required>

Pero, como con otras características HTML5, IE11 no se encuentra en este panorama. Por lo tanto, si tiene una amplia base de usuarios de IE11, considere usar el patternatributo HTML5 que es compatible casi en todos los ámbitos en la mayoría de los navegadores (incluido IE11).

Para tener una implementación agradable y uniforme y quizás extensible o dinámica (basada en el marco que genera su HTML), votaría por el patternatributo:

<input type="text" pattern=".{2,}" required>

Todavía hay un pequeño problema de usabilidad cuando se usa pattern. El usuario verá un mensaje de error / advertencia no intuitivo (muy genérico) cuando lo use pattern. Vea este jsfiddle o debajo:

<h3>In each form type 1 character and press submit</h3>
</h2>
<form action="#">
  Input with minlength: <input type="text" minlength="2" required name="i1">
  <input type="submit" value="Submit">
</form>
<br>
<form action="#">
  Input with patern: <input type="text" pattern=".{2,}" required name="i1">
  <input type="submit" value="Submit">
</form>
Expandir fragmento

Por ejemplo, en Chrome (pero similar en la mayoría de los navegadores), recibirá los siguientes mensajes de error:

Please lengthen this text to 2 characters or more (you are currently using 1 character)

utilizando minlengthy

Please match the format requested

utilizando pattern.

Gabriel Petrovay
fuente
2

Nueva versión:

Extiende el uso (área de texto y entrada) y corrige errores.

// Author: Carlos Machado
// Version: 0.2
// Year: 2015
window.onload = function() {
    function testFunction(evt) {
        var items = this.elements;
        for (var j = 0; j < items.length; j++) {
            if ((items[j].tagName == "INPUT" || items[j].tagName == "TEXTAREA") && items[j].hasAttribute("minlength")) {
                if (items[j].value.length < items[j].getAttribute("minlength") && items[j].value != "") {
                    items[j].setCustomValidity("The minimum number of characters is " + items[j].getAttribute("minlength") + ".");
                    items[j].focus();
                    evt.defaultPrevented;
                    return;
                }
                else {
                    items[j].setCustomValidity('');
                }
            }
        }
    }
    var isOpera = !!window.opera || navigator.userAgent.indexOf(' OPR/') >= 0;
    var isChrome = !!window.chrome && !isOpera;
    if(!isChrome) {
        var forms = document.getElementsByTagName("form");
        for(var i = 0; i < forms.length; i++) {
            forms[i].addEventListener('submit', testFunction,true);
            forms[i].addEventListener('change', testFunction,true);
        }
    }
}
Carlos Machado
fuente
Gracias por esta elegante solución actualizada. ¿Funciona fuera de Chrome / Opera ya que no admiten minlength? caniuse.com/#search=minlength Lo acabo de probar en Mac Safari y no funciona :( Veo que está agregando eventListener para navegadores que no son Chrome / Opera, así que tal vez estoy haciendo algo mal.
rmcsharry
Después de depurar Safari, parece que var items = this.elements; está devolviendo la colección de FORMULARIOS, no los elementos del formulario. Extraño.
rmcsharry
2

Noté que, a veces, en Chrome cuando la función de autocompletar está activada y los campos son de campo por el método de compilación del navegador de autocompletar, omite las reglas de validación de longitud mínima, por lo que en este caso tendrá que deshabilitar la función de autocompletar con el siguiente atributo:

autocompletar = "apagado" 

<input autocomplete="new-password" name="password" id="password" type="password" placeholder="Password" maxlength="12" minlength="6" required />
talsibony
fuente
No se trata de campos de contraseña.
Igor Popov
se trata de entrada HTML, la contraseña es de hecho entrada HTML.
talsibony
2

Consulte http://caniuse.com/#search=minlength , algunos navegadores pueden no admitir este atributo.

Si el valor del "tipo" es uno de ellos:

texto, correo electrónico, búsqueda, contraseña, teléfono o url (advertencia: no incluir número | no es compatible con el navegador "tel" ahora - 2017.10)

use el atributo minlength (/ maxlength), especifica el número mínimo de caracteres.

p.ej.

<input type="text" minlength="11" maxlength="11" pattern="[0-9]*" placeholder="input your phone number">

o use el atributo "patrón":

<input type="text" pattern="[0-9]{11}" placeholder="input your phone number">

Si el "tipo" es número , aunque no se admite la longitud mínima (/ longitud máxima), puede usar min atributo (/ max) en su lugar.

p.ej.

<input type="number" min="100" max="999" placeholder="input a three-digit number">
levinit
fuente
1

Escribí este código JavaScript, [minlength.js]:

window.onload = function() {
    function testaFunction(evt) {
        var elementos = this.elements;
        for (var j = 0; j < elementos.length; j++) {
            if (elementos[j].tagName == "TEXTAREA" && elementos[j].hasAttribute("minlength")) {
                if (elementos[j].value.length < elementos[j].getAttribute("minlength")) {
                    alert("The textarea control must be at least " + elementos[j].getAttribute("minlength") + " characters.");
                    evt.preventDefault();
                };
            }
        }
    }
    var forms = document.getElementsByTagName("form");
    for(var i = 0; i < forms.length; i++) {
        forms[i].addEventListener('submit', testaFunction, true);
    }
}
Carlos Machado
fuente
1

Si desea realizar este comportamiento,
siempre muestre un pequeño prefijo en el campo de entrada o el usuario no puede borrar un prefijo :

   //prefix="prefix_text"
   //if the user change the prefix, restore the input with the prefix:
   if(document.getElementById('myInput').value.substring(0,prefix.length).localeCompare(prefix)) 
       document.getElementById('myInput').value = prefix;
Carlos rafael
fuente
1

Usé max y min, luego los requerí y funcionó muy bien para mí, pero no estoy seguro si es un método de codificación. Espero que ayude

<input type="text" maxlength="13" name ="idnumber" class="form-control"  minlength="13" required>
Humphrey
fuente
1

En mi caso, en el que valido más manualmente y usando Firefox (43.0.4), minlengthy validity.tooShortlamentablemente no están disponibles.

Como solo necesito tener longitudes mínimas almacenadas para continuar, una manera fácil y práctica es asignar este valor a otro atributo válido de la etiqueta de entrada. En ese caso, puede usar min, maxy steppropiedades de las entradas [type = "number"].

En lugar de almacenar esos límites en una matriz, es más fácil encontrarlo almacenado en la misma entrada en lugar de hacer que la identificación del elemento coincida con el índice de la matriz.

Christian Læirbag
fuente
-4

Agregue un valor máximo y uno mínimo, puede especificar el rango de valores permitidos:

<input type="number" min="1" max="999" />
Deepti Gehlot
fuente