patternjavascriptMinor
Liveupdate phone number forms and test for international numbers
Viewed 0 times
numbernumbersinternationaltestphoneforandliveupdateforms
Problem
I took a base from here and built on it. You call the function with
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.
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:
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.
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.