How can I restrict input to 4-digit number

Question

I want to retrieve a 4-digit employee id from the user. How can I restrict the input field to 4-digit?

<tr>
<td>4 digit Employee ID:</td>
<td><input type = "number" name = "employee_id" size = "20"></td>
</tr>

score 4 · Answer 1 · answered Jan 25 '16 at 04:35

4

<tr>
<td>4 digit Employee ID:</td>
<td><input type = "text" name = "employee_id"  pattern="[0-9]{4}" title="4 digit number: e.g. 1234" required></td>
</tr>

answered Jan 25 '16 at 04:35

Programmer

1,266
5
23
44

pattern and required attributes comes with HTML5 – DependencyHell Aug 29 '18 at 16:01

score 1 · Answer 2 · answered Jan 25 '16 at 04:13

1

Use maxlength attribute :

<input type = "number" name = "employee_id" size = "20" maxlength= "4">

answered Jan 25 '16 at 04:13

bumbumpaw

2,522
1
24
54

1

this one doesn't need html5, so it is one useful attribute – DependencyHell Aug 30 '18 at 07:45

score 1 · Answer 3 · edited May 23 '17 at 10:31

1

You can use min and max

<input type="number" name="employee_id" min="1" max="9999">

Referance: How can I limit possible inputs in a HTML5 "number" element?

edited May 23 '17 at 10:31

Community

1
1

answered Jan 25 '16 at 04:13

Afsar

3,104
2
25
35

I tried that, but that would allow them to enter non-four digit numbers unfortunately. However, the person below suggested to use the maxlength attribute, I think that will work! Thanks very much for your input though! – Programmer Jan 25 '16 at 04:15

score 1 · Answer 4 · answered Jan 25 '16 at 04:24

Easiest way would be to use a jquery plugin, like the one at http://jqueryvalidation.org/.

Since you want to restrict to only 4 digits it'd be something like this:

$( "#myform" ).validate({
  rules: {
  field: {
     required: true,
     digits: true,
     maxlength: 4
  }
}

});

How can I restrict input to 4-digit number

4 Answers4