web-dev-qa-db-fra.com

Comment définir la longueur minimale et maximale des caractères dans une zone de texte à l'aide de javascript

Si j'ai un texte et que je souhaite uniquement autoriser l'utilisateur à saisir du texte entre 5 et 10 caractères, comment dois-je procéder à l'aide de javascipt?

J'ai essayé d'utiliser les fonctions mix et max mais elles ne fonctionnent que pour les données numériques.

stringtextboxcharactermaxmin
8
cala

Vous pouvez faire quelque chose comme ça:

"

function checkLength(){
    var textbox = document.getElementById("textbox");
    if(textbox.value.length <= 10 && textbox.value.length >= 5){
        alert("success");
    }
    else{
        alert("make sure the input is between 5-10 characters long")
    }
}
</script>
<input type="text" id="textbox"></input>
<input type="submit" name="textboxSubmit" onclick="checkLength()" />
`
14
rboling

Vous devez utiliser l'attribut maxlength pour les champs de saisie, quelque chose comme ça devrait le faire:

<input name="myTextInput" type="text" maxlength="5"></input>
4
njfife

J'ai fait un peu d'un mélange des échantillons ci-dessus en essayant de le rendre aussi simple que possible et d'éviter les alertes inutiles. Scénario:

function checkLength(){
    var textbox = document.getElementById("comment");
    if(textbox.value.length <= 500 && textbox.value.length >= 5){
        return true;
    }
    else{
        alert("Your comment is too short, please write more.");
        return false;
    }
}

le code dans le champ du formulaire serait: onsubmit = "return checkLength ();">

Et la zone de texte dans le formulaire lui-même:

<label for="comment">*Comment:</label>
<textarea name="comment" id="comment" rows="4" cols="40" required="required"></textarea>

j'espère que cela t'aides!

3
Marc F

Vous pouvez utiliser l'attribut "maxlength" pour ne pas autoriser plus de x caractères et effectuer la validation en utilisant javascript pour une longueur minimale.

voir cet exemple: http://jsfiddle.net/nZ37J/

HTML

<form id="form_elem" action="/sdas" method="post">
   <input type="text" id="example" maxlength="10"></input>
   <span id="error_msg" style="color:red"></span>
   <input type="button" id="validate" value="validate"></input>
</form>

Javascript:

$("#validate").click(function(){
    var inputStr = $("#example").val();
    if(inputStr.length<5)
        $("#error_msg").html("enter atleast 5 chars in the input box");
    else
        $("#form_elem").submit();      
})
3
hemanth
<input name="myTextInput" type="text" minlength="5" maxlength="10"></input>

Cela ferait l'affaire si vous ne voulez pas déranger avec js.

2
Delbin Thomas