How to set min and max character length in a textbox using javascript

Question

If I have a text and I only want to allow the user enter text between 5 and 10 characters long, how do I do this using javascipt?

I have tried using mix and max functions but they only works for numeric data.

Hypesthesia

Answer 1

You could do something like this:

`

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()" />
`

Stotts

This limits the length to at most 5 characters, quite differently from what was asked. (Besides, it works on code units, not characters, really.) – Tijuana

@JukkaK.Korpela I just modified my answer to reflect the modified character lengths. Previously, the question specified the limits to range from 0 to 5 characters. – Stotts

Answer 2

You need to use the maxlength attribute for input fields, something like this should do it:

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

Durango

Yes, I have done this. But, what I want, is the string to not be less than 5 characters and not be greater than 10 characters. Sorry I type 0 instead of 10 above. – Hypesthesia

You would need to solve that with javascript then, @Stotts has a decent solution – Durango

It's ok. I typed an 0 instead of 10 the first time. Thank you for answering though! Appreciate it – Hypesthesia

Answer 3

I did a bit of a mix of the samples above trying to make it as simple as possible and avoid unnecessary alerts. Script:

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;
    }
}

code in the form field would be: onsubmit="return checkLength();">

And the text area in the form itself:

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

hope this helps!

Schlegel

Answer 4

You can use "maxlength" attribute to not allow more than x characters & do validation using javascript for min length.

see this example: 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();      
})

Theroid

Thanks this work's perfect aswell, although I had to change it into javascript instead of jquery. All I had to do was to add .value onto var textbox = document.getElementById("textbox").value; and it worked. Thanks user3071372 and @Stotts – Hypesthesia

Answer 5

<input name="myTextInput" type="text" minlength="5" maxlength="10"></input>

This would do the trick if you do not want to trouble with js.

Enhanced