Build a Telephone Number Validator Project - Build a Telephone Number Validator

JavaScript
1

Tell us what’s happening:

Okay, I have all the basics down, I just don’t know how to check the format. Could someone point me in the right direction?

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Telephone Number Validator</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <div id="input-div">
      <p>Enter Phone Number:</p>
      <input id="user-input"></input>
      <button id="check-btn">Check</button>
      <button id="clear-btn">Clear</button>
      <div id="results-div"></div>
    </div>
    <script src="script.js"></script>
  </body>
</html>

/* file: script.js */
const checkBtn = document.getElementById("check-btn");
const clearBtn = document.getElementById("clear-btn");
const userInput = document.getElementById("user-input");
const results = document.getElementById("results-div");

const convertInput = (num) => {
  const string = num.toString()
  const result = string.replace(/\D/g,'')
  return result
}

const checkInput = (num) => {
  //initialize val variable
  let isValLength = false
  let isValRegion = false

  num = userInput.value


  //Convert to numbers only format
  const test = convertInput(num)


  //Check length

  if(test.length == 0){
    alert("Please provide a phone number")
  }
  if(test.length == 10){
    isValLength = true
    isValRegion = true

    //return result

    return results.innerText = "Valid US number: " + num
  } else if(test.length == 11){

    isValLength = true

    //convert num into array
   const arr = test.split('')

   //check array region

   if(test[0] == 1){
     isValRegion = true

   } else {

     //If inval region code
     isValRegion = false
   }
  } else{

    //If length is invalid
    isValLength = false
  }

  if(isValLength && isValRegion){
    return results.innerText = "Valid US number: " + num
  } else{
    return results.innerText = "Invalid US number: " + num
  }
}

//run main func
checkBtn.addEventListener("click", checkInput)

//clear input
clearBtn.addEventListener("click", () => results.innerText = "")

/* file: styles.css */

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/134.0.0.0 Safari/537.36

Challenge Information:

Build a Telephone Number Validator Project - Build a Telephone Number Validator

2

Hi @gabawo9881

You need to check that phone numbers starting with a prefix, have the correct prefix.

That the length of the numbers is also correct.
For instance: xxx xxx xxxx or 1 xxx xxx xxxx

Account for braces and hyphens.

Have a look though the user stories for examples of valid and invalid US telephone numbers.

Happy coding

3

Now I’ve added a regex, but I’m unsure of how to make it deny specific tests like “1 555)555-5555” or “(555-555-5555”

4

you can try to google, there is a way

1 Like