Y a-t-il un attribut minlength validation dans HTML5?
il semble que l'attribut minlength pour un champ <input> ne fonctionne pas.
Est-il un autre attribut HTML5 avec l'aide de laquelle je peux définir la longueur minimale d'une valeur pour les champs?
15 réponses
vous pouvez utiliser pattern attribut . L'attribut required est également nécessaire, sinon un champ d'entrée avec une valeur vide sera exclu de la " contrainte validation .
<input pattern=".{3,}" required title="3 characters minimum">
<input pattern=".{5,10}" required title="5 to 10 characters">
Si vous voulez créer la possibilité d'utiliser le modèle de "vides, ou longueur minimale", vous pouvez faire ce qui 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)">
Il y est un minlength propriété HTML5 spec maintenant, ainsi que le validity.tooShort de l'interface.
tous 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 la solution HTML5 (si vous voulez minlength 5, maxlength 10 character validation)
http://jsfiddle.net/xhqsB/102/
<form>
<input pattern=".{5,10}">
<input type="submit" value="Check"></input>
</form>
Oui, Le voilà. C'est comme maxlength. W3.org documentation: http://www.w3.org/TR/html5/forms.html#attr-fe-minlength
dans le cas où minlength ne fonctionne pas, utilisez l'attribut pattern comme mentionné par @Pumbaa80 pour la balise input .
Pour les textarea:
Pour définir max; utiliser maxlength et pour min aller à ce lien .
You trouverez ici à la fois pour max et min.
pas HTML5 , mais pratique de toute façon: si vous utilisez AngularJS , vous pouvez utiliser ng-minlength pour les entrées et les textareas. Voir aussi ce Plunk .
(contrairement à maxLength) n'existe pas nativement dans HTML5. Cependant, il y a quelques façons 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>
ma solution pour textarea en utilisant jQuery et en 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>
nouvelle version:
il étend l'utilisation (textarea et input) 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);
}
}
}
voir http://caniuse.com/#search=minlength , certains navigateurs peuvent ne pas supporter cet attribut.
si la valeur du "type" est l'une d'entre elles:
de texte, e-mail, recherche, mot de passe, tel, ou une url (attention:ne pas inclure nombre | pas de prise en charge du navigateur "tel" maintenant - 2017.10)
utiliser minlength (/maxlength), cet attribut 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 utiliser l'attribut" pattern":
<input type="text" pattern="[0-9]{11}" placeholder="input your phone number">
si le" type "est nombre , althougth minlength (/maxlength) n'est pas supporté, vous pouvez utiliser min (/max) à la place de l'attribut.
par exemple.
<input type="number" min="100" max="999" placeholder="input a three-digit number">
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);
}
}
dans mon cas, dans lequel je valide le plus à portée de main et en utilisant Firefox (43.0.4), minlength et validity.tooShort ne sont pas disponibles malheureusement.
mais comme je n'ai besoin que d'un minimum de longueurs stockées pour Procéder, un moyen simple et pratique est d'attribuer cette valeur à un autre attribut valide de la balise d'entrée. Dans ce cas, vous pouvez utiliser min , max , et step d'autres correctement à partir d'entrées de type non textuel (type="Nombre"), mais encore des entrées.
Plutôt que de stocker ces limites dans un tableau, il est plus facile de trouver stockée dans l'entrée, au lieu d'obtenir l'identifiant de l'élément pour correspondre à l'index du tableau.
je remarque que parfois dans chrome quand autofill est en marche et les champs sont Champ par la méthode de construction de navigateur autofill dans, il contourne les règles de validation minlength, donc dans ce cas vous devrez désactiver autofill par l'attribut suivant:
autocomplete= "off"
<input autocomplete="new-password" name="password" id="password" type="password" placeholder="Password" maxlength="12" minlength="6" required />
si le désir de faire ce comportement,
toujours afficher un petit préfixe sur le champ d'entrée 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;
j'ai utilisé max et min alors requis et il a fonctionné pour moi très bien, mais ce qui ne est pas sûr est si est une méthode de codage. J'espère que cela aide
<input type="text" maxlength="13" name ="idnumber" class="form-control" minlength="13" required>
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" />