0

I need to restrict text fields to only allow numbers as the data goes into a database where the fields data types are set in stone, I don't wan't people submitting "£" signs for monetary values.

I know I can use:

 input type=number and also pattern [0-9]

But as per most of the good validation html tools IE doesn't support them in older browsers, I know IE9 (and older) doesn't support number and I'm sure Pattern only has limited support. It's no wonder Chrome and Mozilla are much more widely used.

Is there anyway I can validate it to work in all browsers?

Crouch
  • 846
  • 3
  • 17
  • 32

1 Answers1

0

This will work in stone age browsers as well

(Will not work in ctrl+v scenario)

<input type='text' onkeypress='validate(event)' />

function validate(evt) {
  var theEvent = evt || window.event;
  var key = theEvent.keyCode || theEvent.which;
  key = String.fromCharCode( key );
  var regex = /[0-9]|\./;
  if( !regex.test(key) ) {
    theEvent.returnValue = false;
    if(theEvent.preventDefault) theEvent.preventDefault();
  }
}

Working Fiddle

Deepak Ingole
  • 14,912
  • 10
  • 47
  • 79
  • Cheers for that I was hoping to find a way that didn't involve JS if possible, cos I know you can disable javascript but if thats the way I'll have to go then so be it. – Crouch Oct 01 '13 at 08:51
  • @Crouch With all of my knowledge I dont think it solely possible w/o using JS – Deepak Ingole Oct 01 '13 at 08:54
  • No problem, if only IE would develop browsers that supported the same things chrome and firefox did or if people just didn't use it this wouldn't be a problem. Might be a case of using both html validation and your JS solution. This way it should catch everybody. Although I have javascript date pickers which everyone needs to use so if they have JS disabled its their problem not mine – Crouch Oct 01 '13 at 08:58
  • @Crouch Although `HTML5` has browser compatibility issues, You should make a note that `JS` is supported in all browser.So no Issues using `IE` or any other browser's – Deepak Ingole Oct 01 '13 at 09:00
  • 1
    Yeah thats why I may have to go with it, I've made it work for all browsers if people have disabled JS its their problem not mine I can't compensate for every eventuality unfortunately. I can only do my best. @captain , is there anyway this would work by linking to an external js file or not? – Crouch Oct 01 '13 at 09:02
  • Sorry @captain I didnt make it clear I wanted to have this javascript in an external js file, I'd had trouble doing so because I've always been used to putting it inside the html file, it's not where my expertise lie. I've managed to figure out how to do it now anyway so thank you for all the help – Crouch Oct 01 '13 at 09:19
  • 1
    The code posted does not deal with cut and paste or other non-keyboard input methods. It does not seem to be doing anything on Firefox, and so on. It might be a part of a constituent of a solution, but hardly sufficient as such. – Jukka K. Korpela Oct 01 '13 at 10:07
  • @captain, the question has “only allow numbers” and “work in all browsers”, so it is asking for something that covers all use cases (or, more realistically, as much as possible). – Jukka K. Korpela Oct 01 '13 at 10:13
  • @JukkaK.Korpela can you please edit ans or post new one? I would like to see ans – Deepak Ingole Oct 01 '13 at 10:14
  • It would be more productive to find the question among existing questions and mark this one as a duplicate. The difficult part might be to find the best existing entry. – Jukka K. Korpela Oct 01 '13 at 10:18
  • @JukkaK.Korpela would be great if you share your thoughts on this.I dont think you will find duplicate – Deepak Ingole Oct 01 '13 at 10:23