I have a form which allows only for numbers to be entered in the text box, or an alert appears:

<form name="formName" action="" method="post" OnSubmit="return chkSubmit();"> 
    Input Number 
    <input type="text" name="txtNumber" value="">
    <input type="submit" name="btnSubmit" value="Submit">
</form>

with the following javascript:

<script>
function chkSubmit()
{
     if(isNaN(document.formName.txtNumber.value))
     {
        alert('Please input numbers only.');
        return false;
     }
}</script>

How do I allow for only 4 characters to be entered? No alert, just prevent the user from typing more than 4 characters.

I have a form which allows only for numbers to be entered in the text box, or an alert appears:

<form name="formName" action="" method="post" OnSubmit="return chkSubmit();"> 
    Input Number 
    <input type="text" name="txtNumber" value="">
    <input type="submit" name="btnSubmit" value="Submit">
</form>

with the following javascript:

<script>
function chkSubmit()
{
     if(isNaN(document.formName.txtNumber.value))
     {
        alert('Please input numbers only.');
        return false;
     }
}</script>

How do I allow for only 4 characters to be entered? No alert, just prevent the user from typing more than 4 characters.

• javascript
• validation

• 1 Restricting input like that is annoying for users. You only care that the field is valid when the form is submitted, whatever it contains before then is of no interest to you. – RobG Commented Oct 30, 2012 at 23:14

2 Answers 2

input elements support a maxlength attribute, e.g.:

<input type="text" name="txtNumber" value="" maxlength="4">

...which is then enforced by the user agent (browser). You can also enforce it in your chkSubmit if you want a belt-and-braces approach, by checking the length of the value property, but it's been around forever and I doubt you'll find a user agent that doesn't handle it.

RobG's point (in a ment on the question) is well-taken, as well: Restricting users prior to form submission tends to be irritating for them. It may or may not be appropriate for your use-case, but at least consider not limiting them (but perhaps giving some visual feedback using the keypress event), and only validating length on submit, the way Stack Overflow does on ments.

Use maxlength

<form name="formName" action="" method="post" OnSubmit="return chkSubmit();"> 
    <input type="text" name="txtNumber" maxlength="4" value="" />
    <input type="submit" name="btnSubmit" value="Submit" />
</form>