Form Text Field to ONLY accept numbers and whitespace

Question

I have a basic enquiry form on my website and I want one of the fields to ONLY accept numbers and keyboard spaces (whitespace).

Currently, the phone number field only accepts numbers using:

if(isNaN(form.phone.value)) 
{
alert('Due to SPAM this field will only accept numbers');
form.phone.focus();
return false;
}

When I test the form and use a keyboard space the error message is displayed. I need this field to accept numbers and whitespace. I assume people will use spaces when entering their full telephone number including country/area codes.

Thanks, Can you tell me how I can incorporate a regex to handle whitespaces in the code I supplied please? I am a Javascript novice! Thanks — user2560637, Jul 08 '13 at 12:54

Xotic750 · Answer 1 · 2017-07-19T10:22:01.293

You could do it like this

'use strict';

function addEvent(elem, event, fn) {
  if (typeof elem === 'string') {
    elem = document.getElementById(elem);
  }

  function listenHandler(e) {
    var ret = fn.apply(null, arguments);
    if (ret === false) {
      e.stopPropagation();
      e.preventDefault();
    }

    return ret;
  }

  function attachHandler() {
    window.event.target = window.event.srcElement;
    var ret = fn.call(elem, window.event);
    if (ret === false) {
      window.event.returnValue = false;
      window.event.cancelBubble = true;
    }

    return ret;
  }

  if (elem.addEventListener) {
    elem.addEventListener(event, listenHandler, false);
  } else {
    elem.attachEvent('on' + event, attachHandler);
  }
}

var keys = ' 0123456789';

function verify(e) {
  var key = String.fromCharCode(e.keyCode || e.charCode);
  return keys.indexOf(key) !== -1;
}

addEvent('test', 'keypress', verify);

<input id="test" type="text" />

Update: As everything supports EventTarget.addEventListener these days, you don't need all the additional boilerplate. And the above could be written like.

'use strict';

const element = document.getElementById('test');
const keys = ' 0123456789';
element.addEventListener('keypress', (e) => {
  if (keys.includes(e.key) === false) {
    e.stopPropagation();
    e.preventDefault();
  }
}, false);