Only allow Numbers in input Tag without Javascript

Question

I am fairly new. I am creating a webpage that ask a user for their ID. I want it to be a required field and only allow numbers. I appreciate if you lead me in the correct direction. this is what I have so far.

<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<dynamic>" %>

<!DOCTYPE html>

<html>
<head runat="server">
  <title>Search</title>
</head>
<body>
 <div>
  <table align="center">
    <tr>
        <td class="label">
            Enter ID:
        </td>
         <td>
            <input type="text" name="UserId" id="UserId" />
        </td>
     </tr>
   </table>
  </div>
 </body>
</html>

off the topic: Without JavaScript !!! any specific reasons? I'd love to see the solution though... — Vishal, Sep 21 '12 at 15:28
There is no reason. I looked online and it only give me solution with javascript. It seems to me that its much simpler if I just do it in html. — Yusuf, Sep 21 '12 at 15:31

score 38 · Accepted Answer · edited Mar 25 '14 at 23:06

38

Though it's probably suggested to get some heavier validation via JS or on the server, HTML5 does support this via the pattern attribute.

<input type= "text" name= "name" pattern= "[0-9]"  title= "Title"/>

edited Mar 25 '14 at 23:06

André Teixeira

2,392
4
28
41

answered Sep 21 '12 at 15:58

Brian

2,819
4
24
30

2

Just tried this to no avail :( any chance you could take a peek here? http://stackoverflow.com/questions/17999067/how-to-force-only-numbers-in-a-input-without-javascript – Leon Gaban Aug 01 '13 at 16:03
@Davo This is an HTML5 attribute, so it won't work on older IE's without some polyfill. You can check for support here: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Input – Brian Jun 10 '14 at 13:52
@Brain, I apologize, I misread your answer, it does work in a way you described, I thought it was supposed to work like, when u hit keyboard button that is not number it just wont type anything(like equivalent of returning false in js), so, it did not work that way, but it was not what u had written. Thanks. P.S. I removed my comment :) – dav Jun 10 '14 at 15:31
1

@Davo No problem. To do *that* keyboard blocking, you can see this code here: http://stackoverflow.com/a/19966612/830111 – Brian Jul 09 '14 at 13:44
2

Not to be overly pedantic but the OP used the word "numbers" (plural). Doesn't the pattern on this answer allow only a single digit? This will also not allow negative numbers or decimal places. You may want to look here for a more thorough answer https://stackoverflow.com/questions/16460773/regex-validate-negative-and-positive-decimal-numbers/16461060 – Newclique Aug 15 '18 at 19:49
2

If the field is required, update the `pattern` attribute to include regex's "one or more" quantifier (`[0-9+]`). If optional, you can use "zero or more" (`[0-9*]`). If you need to allow for decimals, leverage the `step` attribute: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/number#step – adamduncan Mar 19 '20 at 17:15

score 22 · Answer 2 · edited Nov 23 '17 at 01:15

22

Try this with the + after [0-9]:

input type="text" pattern="[0-9]+" title="number only"

edited Nov 23 '17 at 01:15

t j

7,026
12
46
66

answered Nov 23 '17 at 00:56

nickko

356
3
12

What's the use of +? – NightOwl Jan 28 '19 at 08:52
2

@Niby Because without + accept only one number if you have some validation! – Sachin from Pune Mar 04 '19 at 12:06

charlie · Answer 3 · 2012-09-24T11:34:57.630

Of course, you can't fully rely on the client-side (javascript) validation, but that's not a reason to avoid it completely. With or without it, you have to do the server-side validation anyway (since the client can disable javascript). And that's just what you're left with, due to your non-javascript solution constraint.

So, after a submit, if the field value doesn't pass the server-side validation, the client should end up on the very same page, with additional error message specifying the requested value format. You also should provide the value format information beforehands, e.g. as a tool-tip hint (title attribute).

There's most certainly no passive client-side validation mechanism existing in HTML 4 / XHTML.

On the other hand, in HTML 5 you have two options:

input of type number:
```
<input type="number" min="xxx" max="yyy" title="Format: 3 digits" />
```
– only validates the range – if user enters a non-number, an empty value is submitted
– the field visual is enhanced with increment / decrement controls (browser dependent)
the pattern attribute:
```
<input type="text" pattern="[0-9]{3}" title="Format: 3 digits" />
<input type="text" pattern="\d{3}" title="Format: 3 digits" />
```
– this gives you a full contorl over the format (anything you can specify by regular expression)
– no visual difference / enhancement

But here you still rely on browser capabilities, so do a server-side validation in either case.

Thank You so basically, I need java script? Will do thank you — Yusuf, Sep 21 '12 at 15:42
Wait a minute. HTML5 seems to provide some improvements. Will report in a while. — charlie, Sep 21 '12 at 15:52

score 0 · Answer 4 · answered Jul 05 '22 at 06:17

0

You can also use

<input type="number" name="amount" pattern="^[0-9]+[0-9]*$"/>

answered Jul 05 '22 at 06:17

Rakesh Yadav

1,966
2
21
35

Only allow Numbers in input Tag without Javascript

4 Answers4

Linked