HiveBrain v1.2.0
Get Started
← Back to all entries
patternjavascriptMinor

Liveupdate phone number forms and test for international numbers

Submitted by: @import:stackexchange-codereview··
0
Viewed 0 times
numbernumbersinternationaltestphoneforandliveupdateforms

Problem

I took a base from here and built on it. You call the function with onkeypress (hence live changing).

The function gives output like this for domestic numbers:


(123) 456–7890

When the numbers pass the above character limit (13), the function outputs international numbers like this:


+12 (345) 678-9012

It doesn't handle backspacing elegantly (reformatting), which is on my to-do list. I'm looking for feedback on how to improve.

var mask = function(content) {
      var val = content.value.split('');
      if (val.length > 13) {
        tel = '+'
      }
      else {tel = '('}
      for(var i=0; i13) {
            val[i]= ' (' + val[i]; 
            }
            else {
            val[i]=val[i]+') ';
            }
          }
          if (i==7){
            if (val.length>13) {
            val[i]= val[i] + ') ';
              if (val[i+2] == '–') {
                val[i+2]='';
                val[i+5]='–'
              }
            }
          }
          if(i==8 && val[i+1] != '–'){
            if (val.length <= 13) {
            val[i]=val[i]+'–';
            }
          }
          tel=tel+val[i];
      }
      content.value=tel;
    };

Solution

Regular expressions are a quicker way to get it done. Here's a naïve implementation that's (I believe) functionally equivalent to yours:

var mask = function (content) {
  var val = content.value.replace(/[^\d]/g, ''); // Remove anything that's not a digit
  if( val.length <= 10 ) { // US number
    content.value = val.replace(/^(\d{3})(\d{3})(\d*)$/, '($1) $2-$3');
  } else { // Other
    content.value = val.replace(/^(\d{2})(\d{3})(\d{3})(\d*)$/, '+$1 ($2) $3-$4');
  }
};


Here's a live demo

But this is far, far from perfect. There are many, many things to consider.

For starters, non-US numbers aren't necessarily longer than US ones. My own number is just 8 digits (or 10, if you count the country digits - or 12 if you use "00xx" instead of "+xx" for the country code). So if I wrote my phone number (as I normally would) as "+xx xx xx xx xx", it'd be formatted as a US number - which it isn't. If I wrote "00xx xx xx xx xx", I'd get "+00 ...", which is also wrong since it's an invalid country code.

On top of that, there's a ton of different local conventions for how to write phone numbers.

Point is that you can't go by the phone-number-length alone.

Regardless of how far you want to go with it, though, regular expressions will come in handy. Here's a nice interactive reg exp demo/tester to get you started.

Code Snippets

var mask = function (content) {
  var val = content.value.replace(/[^\d]/g, ''); // Remove anything that's not a digit
  if( val.length <= 10 ) { // US number
    content.value = val.replace(/^(\d{3})(\d{3})(\d*)$/, '($1) $2-$3');
  } else { // Other
    content.value = val.replace(/^(\d{2})(\d{3})(\d{3})(\d*)$/, '+$1 ($2) $3-$4');
  }
};

Context

StackExchange Code Review Q#12958, answer score: 3

Revisions (0)

No revisions yet.