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

JavaScript
1

Tell us what’s happening:

Hi Guys!
I need your help to figure out how to solve this problem. By manually checking the bunch of different numbers everyone get the right answer in the results-div. Somehow in the automaticlly made test by this site just the first test in this context will pass, the other dont. Could someone give me a hint to what to do ?

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input id="user-input"></input>
    <button id="check-btn">Check</button>
    <button id="clear-btn">Clear</button>
    <div id="results-div"></div>
    <script src="script.js"></script>
</body>
</html>

/* file: styles.css */


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

const resultArr = []
const regex = /[1]?[-( )]?[-( )]?[0-9]{3}[-( )]?[-( )]?[0-9]{3}[-( )]?[0-9]{4}/
checkBtn.addEventListener("click", () => {
  if(input.value === ""){
    alert("Please provide a phone number")
  }
  else if (regex.test(input.value)){
    resultArr.push({
      name: "Valid US number: " + input.value
    });
    
  }
  else{
    resultArr.push({
      name: "Invalid US number: "+ input.value
    });
    
  }
  results.innerText = resultArr.map(el => el.name)
})

clearBtn.addEventListener("click", () => {
  results.innerText = "";
  resultArr.splice(0,resultArr.length)
}
)

Your browser information:

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

Challenge Information:

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

2

Try this. Enter in a valid number manually and click the Check button. Without clearing the results, click the Check button again, and again.

You also have some logic issues with your regular expression. You are on the right track, this can be solved with one regular expression. But your current expression is too permissive and thus is validating a lot of phone numbers that are invalid.

1 Like
3

image
image728×677 58 KB

I know that the Input is not empty after clicking the check button. My strange problem is that the first test will pass and none other. How is that possible ? I mean if i just copy-paste every single number in the tests the resluts are correct. If i have an issue, why is the first test passing ?

4

Are you clicking the Clear button between each manual test you do? You can’t assume the automated tests are doing the same thing. So try checking the first few phone numbers that the tests are checking but don’t click the Clear button between them. Do you see the issue?

1 Like
5

image
image1908×800 149 KB

So I added the that the input will clear after every checkbtn click, because maybe the test will just paste the new number just behind the previous test number. But still. The results are the same. Is the problem maybe because I use an object array to store them ?

6

You need to paste your updated code in here using the triple backtick method so we can test it for ourselves.

When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

7

The tests are doing the equivalent of backspacing to remove the current number and then typing the new number. They are not clicking teh Clear button between each number they test.

You are on the right track here. You can use the resultArr to store the values you want to print out. But what is in the array when you execute this line:

results.innerText = resultArr.map(el => el.name)
8 
const input = document.getElementById("user-input");
const checkBtn = document.getElementById("check-btn");
const clearBtn = document.getElementById("clear-btn");
const results = document.getElementById("results-div");

const resultArr = []
const regex = /[1]?[-( )]?[-( )]?[0-9]{3}[-( )]?[-( )]?[0-9]{3}[-( )]?[0-9]{4}/
checkBtn.addEventListener("click", () => {
  if(input.value === ""){
    alert("Please provide a phone number")
  }
  else if (regex.test(input.value)){
    resultArr.push({
      name: `Valid US number: ${input.value}`
    });
    input.value = "";
  }
  else{
    resultArr.push({
      name: `Invalid US number: ${input.value}`
    });
    input.value = "";
  }
  results.innerText = resultArr.map(el => el.name)
})

clearBtn.addEventListener("click", () => {
  results.innerText = "";
  resultArr.splice(0,resultArr.length)
}
)
9

The code you just pasted in has a bunch of syntax errors.

OK, I figured it out. You need to put the triple backticks on a separate line both before and after your code. You had the triple backticks on the same line as the last line of your code. I have fixed this for you.

10

This doesn’t fix the problem. As I pointed out above, the issue is with what you are printing to the results div.

results.innerText = resultArr.map(el => el.name)
1 Like
11

thanks! I fixed it like this


results.innerText = resultArr[resultArr.length-1].name

Time to improve my regex

1 Like