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
– Vishal, Commented Sep 21, 2012 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
– Yusuf, Commented Sep 21, 2012 at 15:31

André Teixeira · Accepted Answer · 2014-03-25 23:06:46Z

40

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, 2014 at 23:06

André Teixeira

2,6124 gold badges30 silver badges43 bronze badges

answered Sep 21, 2012 at 15:58

Brian

2,8394 gold badges27 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Leon Gaban Over a year ago

Just tried this to no avail :( any chance you could take a peek here? stackoverflow.com/questions/17999067/…

Brian Over a year ago

@Davo This is an HTML5 attribute, so it won't work on older IE's without some polyfill. You can check for support here: developer.mozilla.org/en-US/docs/Web/HTML/Element/Input

Brian Over a year ago

@Davo No problem. To do that keyboard blocking, you can see this code here: stackoverflow.com/a/19966612/830111

Newclique Over a year ago

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 stackoverflow.com/questions/16460773/…

adamduncan Over a year ago

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: developer.mozilla.org/en-US/docs/Web/HTML/Element/input/…

|

t j · Accepted Answer · 2017-11-23 01:15:51Z

24

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

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

edited Nov 23, 2017 at 1:15

t j

7,34412 gold badges49 silver badges67 bronze badges

answered Nov 23, 2017 at 0:56

nickko

3763 silver badges12 bronze badges

2 Comments

NightOwl Over a year ago

What's the use of +?

Sachin from Pune Over a year ago

@Niby Because without + accept only one number if you have some validation!

charlie · Accepted Answer · 2012-09-24 11:34:57Z

14

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.

edited Sep 24, 2012 at 11:34

answered Sep 21, 2012 at 15:38

charlie

1,55711 silver badges20 bronze badges

2 Comments

Yusuf Over a year ago

Thank You so basically, I need java script? Will do thank you

charlie Over a year ago

Wait a minute. HTML5 seems to provide some improvements. Will report in a while.

Rakesh Yadav · Accepted Answer · 2022-07-05 06:17:47Z

0

You can also use

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

answered Jul 5, 2022 at 6:17

Rakesh Yadav

1,9952 gold badges22 silver badges37 bronze badges

Collectives™ on Stack Overflow

Only allow Numbers in input Tag without Javascript

4 Answers 4

6 Comments

2 Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

6 Comments

2 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related