Existe-t-il un attribut de validation minlength dans HTML5?
Il semble que l'attribut minlength d'un champ <input> ne fonctionne pas.
Y at-il un autre attribut dans HTML5 à l’aide duquel je peux définir la longueur minimale d’une valeur pour les champs?
Vous pouvez utiliser le pattern attribut . Le required attribut est également nécessaire, sinon un champ de saisie avec une valeur vide sera exclu de validation de contrainte .
<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 "vide ou minimum", 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)">
Là se trouve une propriété minlength dans spécification HTML5 , ainsi que l'interface validity.tooShort.
Les deux sont maintenant activés dans les versions récentes de tous les navigateurs modernes. Pour plus de détails, voir https://caniuse.com/#search=minlength .
Voici une solution exclusivement HTML5 (si vous voulez minlength 5, validation maxlength 10 caractères)
http://jsfiddle.net/xhqsB/102/
<form>
<input pattern=".{5,10}">
<input type="submit" value="Check"></input>
</form>
Oui, ça y est. C'est comme maxlength. Documentation W3.org: http://www.w3.org/TR/html5/forms.html#attr-fe-minlength
Si minlength ne fonctionne pas, utilisez l'attribut pattern mentionné par @ Pumbaa80 pour la balise input.
Pour la zone de texte: Pour le réglage max; utilisez maxlength et pour min aller à ce lien .
Vous trouverez ici à la fois pour max et min.
l'attribut minLength (contrairement à maxLength) n'existe pas nativement dans HTML5. Cependant, il existe quelques moyens de valider un champ s'il contient moins de x caractères.
Un exemple est donné en utilisant jQuery à 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>
Pas HTML5, mais pratique quand même: si vous utilisez AngularJS , vous pouvez utiliser ng-minlength pour les deux entrées et textareas. Voir aussi this Plunk .
Ma solution pour textarea utilisant jQuery et combinant HTML5 nécessitait 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>
J'ai utilisé maxlength et minlength avec ou sans required et cela fonctionnait très bien pour HTML5.
<input id="passcode" type="password" minlength="8" maxlength="10">`
L'attribut minlength est maintenant largement pris en charge dans la plupart des navigateurs .
<input type="text" minlength="2" required>
Mais, comme avec d'autres fonctionnalités HTML5, IE11 est absent de ce panorama. Par conséquent, si vous avez une large base d'utilisateurs IE11, envisagez d'utiliser l'attribut HTML5 pattern 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'attribut pattern:
<input type="text" pattern=".{2,}" required>
Il y a toujours un petit problème de convivialité lors de l'utilisation de pattern. L'utilisateur verra un message d'erreur/avertissement non intuitif (très générique) lors de l'utilisation de pattern. Voir this 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>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 minlength et
Please match the format requested
en utilisant pattern.
Voir http://caniuse.com/#search=minlength , certains navigateurs peuvent ne pas prendre en charge cet attribut.
Si la valeur du "type" est l'un d'entre eux:
texte, email, recherche, mot de passe, tel ou URL (avertissement: ne pas inclure le numéro | aucun navigateur ne prend en charge "tel" maintenant - 2017.10)
utilisez l'attribut use minlength (/ maxlength), il spécifie le nombre minimal 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) n'est pas pris en charge, vous pouvez utiliser l'attribut min (/ max) à la place.
par exemple.
<input type="number" min="100" max="999" placeholder="input a three-digit number">
Je remarque que parfois dans chrome lorsque le remplissage automatique est activé et que les champs sont renseignés par la méthode de construction du navigateur de remplissage automatique, elle ignore les règles de validation minlength. Dans ce cas, vous devrez désactiver le remplissage automatique à l'aide de l'attribut suivant. :
autocomplete = "off"
<input autocomplete="new-password" name="password" id="password" type="password" placeholder="Password" maxlength="12" minlength="6" required />
Nouvelle version:
Il étend l'utilisation (textarea et input) et corrige des 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);
}
}
}
Si désir de faire ce comportement,
toujours affiche 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;
Dans mon cas, dans lequel je valide le plus manuellement et avec Firefox (43.0.4), minlength et validity.tooShort ne sont malheureusement pas disponibles.
Etant donné que je n'ai besoin que de disposer de longueurs minimales stockées pour continuer, un moyen simple et pratique consiste à affecter cette valeur à un autre attribut valide de la balise input. Dans ce cas, vous pouvez utiliser les propriétés min, max et step de [type = "nombre"].
Plutôt que de stocker ces limites dans un tableau, il est plus facile de le trouver stocké dans la même entrée plutôt que de faire en sorte que l'ID d'élément corresponde à l'index du tableau.
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);
}
}
J'ai utilisé max et min alors requis et cela a très bien fonctionné pour moi, mais je ne sais pas 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>