JQuery phone number validation allow spaces, minimum of 8 digits

jqueryjquery-validatephone-numberregex

How can I allow spaces within an a numbers only validation, with a minimum of 8 digits?
Phone numbers are much easier to type in when spaces are allowed. e.g. 0400 123 456, 9699 1234.

Here's my code so far, I've only got the minimum 8 digits validation working:

jQuery.validator.addMethod(
  "phone",
  function(phone_number, element) {
    return this.optional(element) || /^\d{8}$/.test(phone_number);
  },
    "Please enter numbers only"
);

Best Answer

Remove the space before validating:

return this.optional(element) || /^\d{8,}$/.test(phone_number.replace(/\s/g, ''));

This way you retain the space

Related Solutions

Regex – US Phone Number Verification

It seems to me that you're putting more effort into this than it warrants. Consider:

If your purpose is to guard against mis-entered phone numbers, then you can probably catch well over 90% of them with just a very simple check.

If your purpose is to try to force users to provide a valid number whether they want to give that information out or not, then you've taken on a hopeless task - even if you were able to access 100% accurate, up-to-the-second telco databases to verify that the exact number entered is currently live, you still don't gain any assurance that the number they gave you is their own. Once again, a simple check will foil the majority of people entering bogus numbers, but those who are willing to try more than two or three times will find a way to defeat your attempts to gain their numbers.

Either way, a simple test is going to get you good results and going into more complex rule sets will take up increasingly more time while providing increasingly little benefit to you (while also potentially adding false positives, as already shown with the "seven of the same digit" and 867-5309 cases).

Html – How to allow only numeric (0-9) in HTML inputbox using jQuery

^{Note: This is an updated answer. Comments below refer to an old version which messed around with keycodes.}

jQuery

Try it yourself on JSFiddle.

There is no native jQuery implementation for this, but you can filter the input values of a text <input> with the following inputFilter plugin (supports Copy+Paste, Drag+Drop, keyboard shortcuts, context menu operations, non-typeable keys, the caret position, different keyboard layouts, and all browsers since IE 9):

// Restricts input for the set of matched elements to the given inputFilter function.
(function($) {
  $.fn.inputFilter = function(inputFilter) {
    return this.on("input keydown keyup mousedown mouseup select contextmenu drop", function() {
      if (inputFilter(this.value)) {
        this.oldValue = this.value;
        this.oldSelectionStart = this.selectionStart;
        this.oldSelectionEnd = this.selectionEnd;
      } else if (this.hasOwnProperty("oldValue")) {
        this.value = this.oldValue;
        this.setSelectionRange(this.oldSelectionStart, this.oldSelectionEnd);
      } else {
        this.value = "";
      }
    });
  };
}(jQuery));

You can now use the inputFilter plugin to install an input filter:

$(document).ready(function() {
  $("#myTextBox").inputFilter(function(value) {
    return /^\d*$/.test(value);    // Allow digits only, using a RegExp
  });
});

See the JSFiddle demo for more input filter examples. Also note that you still must do server side validation!

Pure JavaScript (without jQuery)

jQuery isn't actually needed for this, you can do the same thing with pure JavaScript as well. See this answer.

HTML 5

HTML 5 has a native solution with <input type="number"> (see the specification), but note that browser support varies:

Most browsers will only validate the input when submitting the form, and not when typing.
Most mobile browsers don't support the step, min and max attributes.
Chrome (version 71.0.3578.98) still allows the user to enter the characters e and E into the field. Also see this question.
Firefox (version 64.0) and Edge (EdgeHTML version 17.17134) still allow the user to enter any text into the field.

Try it yourself on w3schools.com.