Existe-t-il un attribut de validation de longueur minimale en HTML5?

608

Il semble que l' minlengthattribut d'un <input>champ ne fonctionne pas.

Existe-t-il un autre attribut en HTML5 à l'aide duquel je peux définir la longueur minimale d'une valeur pour les champs?

html html5-validation emilan
la source
3
Ce ne sera pas la réponse pour chaque champ, mais si vous voulez simplement vous assurer qu'une valeur est là, vous pouvez utiliser l'attribut "requis". <input type = "text" name = "input1" required = "required" />
Aucun
1
Duplicata possible: stackoverflow.com/questions/5533053/textarea-character-limit/…
Web_Designer
7
Il n'existe pas, mais faisons des histoires et montons-le! w3.org/Bugs/Public/show_bug.cgi?id=20557
Eric Elliott
Vous devez utiliser JS / Jquery si vous souhaitez effectuer une implémentation complète (par exemple, requis, longueur minimale, message d'erreur lors de la soumission, etc.). Safari ne prend toujours pas entièrement en charge même l'attribut requis, et seuls Chrome et Opera prennent en charge minLength. par exemple, voir caniuse.com/#search=required
rmcsharry

Réponses:

1326

Vous pouvez utiliser l' patternattribut . L' requiredattribut est également nécessaire, sinon un champ de saisie avec une valeur vide sera exclu de la validation des contraintes .

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

Si vous souhaitez créer l'option permettant d'utiliser le modèle pour "vide ou longueur minimale", vous pouvez procéder comme suit:

<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)">
user123444555621
la source
139
+1 pour l'utilisation de html5 au lieu de jQuery. Je voulais juste ajouter que l'attribut title vous permet de définir le message à afficher à l'utilisateur si le modèle n'est pas respecté. Sinon, un message par défaut sera affiché.
Aucun
11
@ J.Money Il dit toujours "Veuillez faire correspondre le format demandé: <title>". Existe-t-il un moyen de contourner le message par défaut précédent?
CᴴᴀZ
59
Malheureusement, cela n'est pas pris en charge pour les zones de texte .
ThiefMaster
27
@ChaZ @Basj Vous pouvez ajouter un message d'erreur personnalisé en ajoutant l'attribut suivant:oninvalid="this.setCustomValidity('Your message')"
bigtex777
6
Si vous saisissez une entrée non valide et que vous l'utilisez setCustomValidity, le message d'erreur continuera de s'afficher même après avoir corrigé l'entrée. Vous pouvez utiliser la onchangeméthode suivante pour contrer cela. oninvalid="this.setCustomValidity('Field must contain min. 5 characters')" onchange="try{setCustomValidity('')}catch(e){}"
sohaiby
154

Il existe maintenant une minlengthpropriété dans la spécification HTML5 , ainsi que la propriétévalidity.tooShort interface.

Les deux sont désormais activés dans les versions récentes de tous les navigateurs modernes. Pour plus de détails, voir https://caniuse.com/#search=minlength .

rhgb
la source
1
Firefox 44 et toujours pas implémenté.
Christian Læirbag
2
Toujours pas pris en charge en dehors de Chrome ou Opera. caniuse.com/#search=minlength
rmcsharry
Nous sommes en janvier 2017 et toujours uniquement compatible avec Chrome et Opera minlength
TrojanName
2
@TrojanName Firefox prend en charge l' minlengthattribut depuis la version 51 .
Luca Detomi
16
Les commentaires périodiques pour mettre à jour le statut de cette réponse Stack Overflow sont moins utiles que de dire aux gens de vérifier ici les informations actuelles: caniuse.com/#search=minlength
chadoh
19

Voici une solution HTML5 uniquement (si vous voulez une validation de caractères minlength 5, maxlength 10)

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

<form>
  <input pattern=".{5,10}">
  <input type="submit" value="Check"></input>
</form>
Ali Çarıkçıoğlu
la source
3
Comment définir un message d'erreur personnalisé si le champ n'est pas OK?
Basj
2
Pour un message personnalisé, ajoutez un titleattribut avec le message requis.
Shlomi Hassid
8
La même patternréponse a été donnée quelques mois plus tôt . Comment cette réponse est-elle meilleure?
Dan Dascalescu
@DanDascalescu Il n'avait pas de balises de formulaire et une explication claire. J'ai également inclus une démo jsfiddle fonctionnelle. (les règles de Stackoverflow de btw disent qu'il n'est pas interdit de donner des réponses similaires tant qu'elles sont utiles à la communauté)
Ali Çarıkçıoğlu
Une façon de donner une réponse encore meilleure est d'inclure la démo ici sur SO en tant qu'extrait de code exécutable .
Dan Dascalescu
11

Oui, ça y est. C'est comme maxlength. Documentation W3.org: http://www.w3.org/TR/html5/forms.html#attr-fe-minlength

Dans le cas où minlengthcela ne fonctionne pas, utilisez l' patternattribut comme mentionné par @ Pumbaa80 pour la inputbalise.

Pour la zone de texte: Pour la définition de max; utiliser maxlengthet pour min aller à ce lien .

Vous trouverez ici à la fois pour max et min.

SohelAhmedM
la source
8

J'ai utilisé maxlength et minlength avec ou sans requiredet cela a très bien fonctionné pour moi pour HTML5.

<input id="passcode" type="password" minlength="8" maxlength="10">
Développer l'extrait

"

benaff033
la source
6

L'attribut minLength (contrairement à maxLength) n'existe pas nativement en HTML5. Cependant, il existe quelques façons de valider un champ s'il contient moins de x caractères.

Un exemple est donné en utilisant jQuery sur ce lien: 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
la source
1
"L'attribut minLength (contrairement à maxLength) n'existe pas nativement en HTML5" Oui, il le fait: w3.org/TR/html5/…
mikemaccana
Toujours pas pris en charge en dehors de Chrome ou Opera. caniuse.com/#search=minlength
rmcsharry
5

Pas HTML5, mais pratique quand même: si vous utilisez AngularJS , vous pouvez l'utiliser ng-minlengthpour les entrées et les zones de texte. Voir aussi ce Plunk .

mik01aj
la source
Si Angular avait été écrit pour être conforme aux normes, il aurait utilisé quelque chose comme, data-ng-minlengthmais pourquoi un développeur se soucierait-il des normes? > __>
John
4
Cher disciple standard, vous pouvez utiliser data-ng-minlengthaussi bien .
mik01aj
4

Ma solution pour textarea utilisant jQuery et combinant HTML5 a nécessité une validation pour vérifier la longueur minimale.

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
la source
Réponse très utile et élégante!
Silvio Delgado
4

minlengthL'attribut est désormais largement pris en charge dans la plupart des navigateurs .

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

Mais, comme pour les autres fonctionnalités HTML5, IE11 est absent de ce panorama. Donc, si vous avez une large base d'utilisateurs IE11, envisagez d'utiliser l' patternattribut HTML5 qui est pris en charge presque partout dans la plupart des navigateurs (y compris IE11).

Pour avoir une implémentation agréable et uniforme et peut-être extensible ou dynamique (basé sur le framework qui génère votre HTML), je voterais pour l' patternattribut:

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

Il y a toujours une petite prise en main lors de l'utilisation pattern. L'utilisateur verra un message d'erreur / d'avertissement non intuitif (très générique) lors de l'utilisation pattern. Voir ce jsfiddle ou ci-dessous:

<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>
Développer l'extrait

Par exemple, dans Chrome (mais similaire dans la plupart des navigateurs), vous obtiendrez les messages d'erreur suivants:

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

en utilisant minlengthet

Please match the format requested

en utilisant pattern.

Gabriel Petrovay
la source
2

Nouvelle version:

Il étend l'utilisation (zone de texte et entrée) et corrige les bugs.

// 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
la source
Merci pour cette élégante solution mise à jour. Cela fonctionne-t-il en dehors de Chrome / Opera, car ils ne prennent pas en charge minlength? caniuse.com/#search=minlength Je viens de le tester sur Mac Safari et cela ne fonctionne pas :( Je vois que vous ajoutez eventListener pour les navigateurs non Chrome / Opera, alors peut-être que je fais quelque chose de mal.
rmcsharry
Après avoir débogué Safari, il semble que var items = this.elements; renvoie la collection FORMS, pas les éléments du formulaire. Bizarre.
rmcsharry
2

Je remarque que, parfois, dans Chrome lorsque la saisie automatique est activée et que les champs sont définis par la méthode de construction du navigateur de saisie automatique, elle contourne les règles de validation de la longueur minimale, dans ce cas, vous devrez désactiver la saisie automatique par l'attribut suivant:

autocomplete = "off" 

<input autocomplete="new-password" name="password" id="password" type="password" placeholder="Password" maxlength="12" minlength="6" required />
talsibony
la source
Il ne s'agit pas de champs de mot de passe.
Igor Popov
il s'agit d'une entrée HTML, le mot de passe est en effet une entrée HTML.
talsibony
2

Voir http://caniuse.com/#search=minlength , certains navigateurs peuvent ne pas prendre en charge cet attribut.

Si la valeur du "type" est l'une d'elles:

texte, e-mail, recherche, mot de passe, tel ou url (avertissement: ne pas inclure de numéro | pas de support de navigateur "tel" maintenant - 2017.10)

utilisez l' attribut minlength (/ maxlength), il spécifie le nombre minimum de caractères.

par exemple.

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

ou utilisez l'attribut "pattern":

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

Si le "type" est nombre , bien que minlength (/ maxlength) ne soit pas pris en charge, vous pouvez utiliser min attribut (/ max) à la place.

par exemple.

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

J'ai écrit ce code 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
la source
1

Si vous souhaitez effectuer ce comportement, affichez
toujours un petit préfixe dans le champ de saisie ou l'utilisateur ne peut pas effacer un préfixe :

   //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
la source
1

J'ai utilisé max et min puis requis et cela a très bien fonctionné pour moi, mais ce que je ne sais pas, c'est si c'est une méthode de codage. J'espère que ça aide

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

Dans mon cas, dans lequel je valide le plus manuellement et en utilisant Firefox (43.0.4), minlengthet validity.tooShortne sont malheureusement pas disponibles.

Étant donné que je n'ai besoin que de stocker des longueurs minimales pour continuer, un moyen simple et pratique consiste à attribuer cette valeur à un autre attribut valide de la balise d'entrée. Dans ce cas - là, vous pouvez utiliser min, maxet steppropriétés de [type = « nombre »] entrées.

Plutôt que de stocker ces limites dans un tableau, il est plus facile de le trouver stocké dans la même entrée au lieu d'obtenir l'ID d'élément pour correspondre à l'index du tableau.

Christian Læirbag
la source
-4

Ajoutez à la fois une valeur max et une valeur min, vous pouvez spécifier la plage de valeurs autorisées:

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