5

CodePen: http://codepen.io/leongaban/pen/hbHsk

I've found multiple answers to this question on stack here and here

However they all suggest the same fix, using type="number" or type="tel"

None of these are working in my codepen or project :(

enter image description here

Do you see what I'm missing?

Community
  • 1
  • 1
Leon Gaban
  • 36,509
  • 115
  • 332
  • 529
  • Seems like you need some client side scripting to intercept non numbers and reject them. – hoss Aug 01 '13 at 16:09
  • What browser are you using? type="number" should works. So far, to force only numbers in all browsers you will need javascript validation, if you are sure that users only use modern browses you can make it only with html5 – Hernandcb Aug 01 '13 at 16:14
  • I use both Chrome (main browser) and FireFox... both are still allowing me to type Letters – Leon Gaban Aug 01 '13 at 16:17

5 Answers5

7

It doesn't stop you from typing, but it does invalidate the input. You can see that if you add the following style:

input:invalid {
  border:1px solid red;
}
Tim Mac
  • 1,149
  • 1
  • 8
  • 17
7

Firstly, what browsers are you using? Not all browsers support the HTML5 input types, so if you need to support users who might use old browsers then you can't rely on the HTML5 input types working for all users.

Secondly the HTML5 input validation types aren't intended to do anything to stop you entering invalid values; they merely do validation on the input once it's entered. You as the developer are supposed to handle this by using CSS or JS to determine whether the field input is invalid, and flag it to the user as appropriate.

If you actually want to prevent non-digit characters from ever getting into the field, then the answer is yes, you need to use Javascript (best option is to trap it in a keyUp event).

You should also be careful to ensure that any validation you do on the client is also replicated on the server, as any client-side validation (whether via the HTML5 input fields or via your own custom javascript) can be bypassed by a malicious user.

Spudley
  • 166,037
  • 39
  • 233
  • 307
  • Thanks, time to search for the best javascript / jQuery methods to take care of this now... imho this should be taken care off on the markup level. Maybe HTML6 :) – Leon Gaban Aug 01 '13 at 16:20
  • 3
    the trouble with doing it in the markup is that there's too many edge cases and too many possible ways of doing it; they'd never please everyone. For example, what do you do if someone copy+pastes a string into your field? If it contains digits but isn't entirely digits, how do you handle that? Some sites would want it blocked entirely, others accept the digit characters. Others accept digits up until the first non-digit... etc. As I say, lots and lots of edge cases. – Spudley Aug 01 '13 at 16:25
6

I use a dirty bit of JS inline, it's triggered upon paste/keying (input).

Within your input tag add the following:

oninput="this.value=this.value.replace(/(?![0-9])./gmi,'')"

All it's doing is replacing any character not 0-9 with nothing.

I've written a tiny demo which you can try below:

Numbers only: <input oninput="this.value=this.value.replace(/(?![0-9])./gmi,'')"></input>
Beavatron Prime
  • 309
  • 2
  • 4
  • 1
    For some reason this clears out the entire field when I press any non numeric character. – Alexander Suraphel Sep 16 '19 at 06:57
  • @AlexanderSuraphel - Is that a result from using the "Run code snippet" button above?? – Beavatron Prime Jan 15 '20 at 16:43
  • Hi! Looks great! How can one allow for either ```,```or ```.``` as well? Should I drop another question? Thanks! – onit Sep 22 '22 at 14:53
  • Apologies for the delay, from my line above in between "replace(" and "gmi," replace the current regex with "/(?![0-9|\.|\,])./" (without speechmarks) this will enable "," and "." for your input field. – Beavatron Prime May 01 '23 at 11:59
3

Firstly, in your Codepen, your inputs are not fully formatted correctly in a form.... Try adding the <form></form> tags like this:

<form>
<lable>input 1 </lable>
<input type='tel' pattern='[0-9]{10}' class='added_mobilephone' name='mobilephone' value='' autocomplete='off' maxlength='20' />

<br/>

<lable>input 2 </lable>
<input type="number" pattern='[0-9]{10}'/>

<br/>

<lable>input 3 </lable>
<input type= "text" name="name" pattern="[0-9]"  title="Title"/>
</form>
Veve
  • 6,643
  • 5
  • 39
  • 58
Majo0od
  • 2,278
  • 10
  • 33
  • 58
2

Just add a check to the onkeypress event to make sure that the no alphanumeric characters can be added

 <input 
     type="text" 
     placeholder="Age" 
     autocomplete="off" 
     onkeypress="return event.charCode >= 48 && event.charCode <= 57" 
     maxlength="10" 
 />
Andre Lombaard
  • 6,985
  • 13
  • 55
  • 96