CODEWITHSUNDEEP
javascripthtml
Peanuty
Peanuty

Reputation: 23

Validating phone number with different formats WITHOUT regex

In JavaScript, I need validate phone numbers without using regular expressions (must be with string manipulation). The phone numbers have to be in one of the following formats:

  1. 123-456-7890
  2. 1234567890
  3. (123)4567890
  4. (123)456-7890

Then I must also provide an alert if the phone number isn't in one of the formats listed above.

I have only been able to manage to get #2 working, which looks something like this: 

function len(gth) 
{
if (gth.value.length != 10) 
    {
        alert("Telephone numbers MUST be 10 digits!");
    }
}

which down in the HTML it would call up to the function: 

<p>Phone: &nbsp;&nbsp; <input id = "phone" onblur="len(this)" name = "Phone" size = "20" type = "text" maxlength = "10"> </p>

Upvotes: 1

Views: 6219

Answers (5)

user663031
user663031

Reputation:

I would replace the numbers with something like x, then check against predefined patterns:

function check(num) {
  let pattern = '';
  for (let i = 0; i < num.length; i++) {
    pattern += num[i] >= '0' && num[i] <= '9' ? 'x' : num[i];
  }

  return ['xxx-xxx-xxxx', 'xxxxxxxxxx', '(xxx)xxxxxxx', '(xxx)xxx-xxxx']
    .indexOf(pattern) >= 0;
}

For extra credit, find the bug in the above program.

However, you don't really need to do any of this. You should be able to use the pattern attribute on the input element. That will also provide a better user experience. For instance, you can style the input element using the :invalid pseudo-class, by putting a red border around it for example, to give the user real-time feedback that their input is not valid. Yes, that takes a regular expression--what was your reason for not wanting to use a regular expression again?

Upvotes: 1

synthet1c
synthet1c

Reputation: 6282

This is my attempt. The key is creating an array from the string then filtering out any non numerical characters. It would be easier to use regular expression though. just 

number.replace(/(\D+)/g, '')


const numbers = [
  '123-456-7890',
  '1234567890',
  '(123)4567890',
  '(123)456-7890',
  '+61(123) 456-7890',
  '12345',
  '))))01/34$89.77(99'
]

// validate a phone number
function validate(number) {
  const digits = clean(number)
  console.log({
    number, 
    digits, 
    length: digits.length, 
    pass: digits.length === 10
  })
}

// remove any non digits from the number
function clean(number) {
  return Array.from(number).filter(char => {
    return !isNaN(char) && char !== ' '
  }).join('')
}

numbers.forEach(validate)

Upvotes: 0

Alexandre Neukirchen
Alexandre Neukirchen

Reputation: 2783

Since you need a solution without regex, I believe this should work.

const phones = [
  '123-456-7890',
  '1234567890',
  '(123)4567890',
  '(123)456-7890',
  '+61(123) 456-7890',
  '12345',
  '))))01/34$89.77(99'
]

function len(gth) {
    if (gth.substring(3, 4) == '-' && gth.substring(7, 8) == '-') // 123-456-7890
        gth = gth.replace('-', '').replace('-', '');
    else if (gth.substring(0, 1) == '(' && gth.substring(4, 5) == ')' && gth.substring(8, 9) == '-') // (123)456-7890
        gth = gth.replace('(', '').replace(')', '').replace('-', '');
    else if (gth.substring(0, 1) == '(' && gth.substring(4, 5) == ')') // (123)4567890
        gth = gth.replace('(', '').replace(')', '');        
    
    if (!isNaN(gth) && gth.length == 10) {
        return true;
    }
    alert("Telephone numbers:" + gth + " MUST be 10 digits!");
}

phones.forEach(len)

Upvotes: 1

NSTuttle
NSTuttle

Reputation: 3345

Basic example of extracting the input data to Array

function test() {
  var phnTest = document.getElementById('phone').value;
  var strArray = [];
  strArray = phnTest.split('');
  document.getElementById('p').innerHTML = strArray;
}
 <form action="demo_form.asp">
  Phone <input id="phone" type="text" name="phone"><br>
  <input type="button" value='Submit' onclick="test()">
</form> 
<p id='p'></p>

This is dependent on how the data is structured, if you need to search a body of text and so on, but basics would be...

If it's a simple pull from an <input>, grab the data...

Take the input data, and generate an array with each character. You could then test, say strArray[3], for a dash or a dot. If not present, it can continue along to check for seven numbers in a row and so on.

This is going to be extremely consuming and require a number of conditionals to be checked. I assume the "without RegEx" is a requirement for a project or such, if not, recommend learning and using RegEx.

Hope this gets you going.

Upvotes: 0

Fady Yacoub
Fady Yacoub

Reputation: 172

You can make it manually be:

  • Checking string size if it is the expected or not
  • split the string to char array then parse them as integers inside a try block if numberFormatException is thrown it should be a bracket ( ) or -

Upvotes: 0

Related Questions