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

Tell us what’s happening:

could someone tell me why this is throwing me a syntax error on 16? I’ve tried not making the .some and .test a function but that doesn’t work either.

Your code so far

<!-- file: index.html -->
<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Telephone Number Validator</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <h1>Telephone Number Validator</h1>
  <form>
    <input type="text" id="user-input">
    <button id="check-btn">Check</button>
    <button id="clear-btn">Clear</button>
  </form>
  <div id="results-div"></div>
  <script src="script.js"></script>
</body>
</html>
/* file: styles.css */

/* file: script.js */
let resultsDiv = document.getElementById("results-div");
let checkBtn = document.getElementById("check-btn");
let clearBtn = document.getElementById("clear-btn");
let userInput = document.getElementById("user-input");
const numberRegex = [/^1? ?(( ?\d{3} [- ]*)|(\( ?\d{3}[- ]*\) *))\d{3}[- ]?\d{4}$/gm, /\d{10}/gm, /\d*\(\d[\d)]{3}\d{3}-\d{4}/gm, /\d{3}-\d{3}-\d{4}/gm, /^\d\s\d{3}-\d{3}-\d{4}/gm];

const input = userInput.value;

const matchNumber = (pattern) => {
  console.log(numberRegex);
  
  if (userInput.value === ""){
    window.alert("Please provide a phone number");
  } else if
    (numberRegex.some((pattern), () => 
    pattern.test(input)){
     resultsDiv.textContent = 
  `"Valid US number: ${input}"`} else{`"Invalid US number: ${input}"`
  }
}

//matchNumber()
/*function checkIfNumber(){
  if (userInput.value === ""){
   resultsDiv.textContent = "Please provide a phone number";
  }
  else {
    return;
  }
}*/

const clear = () => {
  resultsDiv.textContent = "";
}
checkBtn.addEventListener("click", () => {
  matchNumber(input);
})

clearBtn.addEventListener("click", clear)

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.4 Safari/605.1.15

Challenge Information:

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

This doesn’t make sense. The some method takes a single callback function. You are passing it two arguments: the pattern variable and an anonymouse arrow function.

P.S. I guess technically the some method can take a second argument, the value to use as this in the callback, but that doesn’t apply here. Regardless, the first argument needs to be the callback function.

I fixed it

(numberRegex.some(() => {
    pattern.test(input)}){
     resultsDiv.textContent = 
  `"Valid US number: ${input}"`} else{`"Invalid US number: ${input}"`
  }
}

but its still throwing me a syntax error.

It is really hard to help if you don’t give us all of the code. It does look like you still have a syntax error. Remember, you must have the same number of opening and closing parentheses.

You’ve got a lot of additional issues as well. But the biggest piece of advice I can give you is that /script.js is a lot different than script.js. I suggest you use the latter in your script tag.

Oh, my bad, I wasn’t using your HTML, I was using the HTML that was already in the challenge from the last time I helped someone and they had the bad script tag. Yours if fine. Disregard what I said above about the script tag.

But you still have other issues you need to figure out.

Here’s my new code. I’m trying to iterate through the array of regexes to find a match with the user input but for some reason the code still isn’t working.

let resultsDiv = document.getElementById("results-div");
let checkBtn = document.getElementById("check-btn");
let clearBtn = document.getElementById("clear-btn");
let userInput = document.getElementById("user-input");
const numberRegex = [/^1? ?(( ?\d{3} [- ]*)|(\( ?\d{3}[- ]*\) *))\d{3}[- ]?\d{4}$/gm, /\d{10}/gm, /\d*\(\d[\d)]{3}\d{3}-\d{4}/gm, /\d{3}-\d{3}-\d{4}/gm, /^\d\s\d{3}-\d{3}-\d{4}/gm];

const input = userInput.value;

const check = (pattern) => numberRegex.some( () => {
  pattern.test(input)
})

const matchNumber = () => {
  console.log(numberRegex);
  
  if (userInput.value === ""){
    window.alert("Please provide a phone number");
  } else if(check === 0){
  for (i=0; i < numberRegex.length; i++){
    if (
      numberRegex[i].match(input) === 1
    )
    /*(numberRegex.some(numberRegex, (pattern) => 
    pattern.test(input))*/{
     resultsDiv.textContent = 
  `"Valid US number: ${input}"`} else{`"Invalid US number: ${input}"`
  }
}
  }
}

//matchNumber()
/*function checkIfNumber(){
  if (userInput.value === ""){
   resultsDiv.textContent = "Please provide a phone number";
  }
  else {
    return;
  }
}*/

const clear = () => {
  resultsDiv.textContent = "";
}
checkBtn.addEventListener("click", () => {
  matchNumber(input);
})

clearBtn.addEventListener("click", clear)

Explain this to me.

What is this doing?

Sorry, I can’t give you a ton of help here. This is a certification project, so this needs to be your own work. I will say that one of the advantages of using regular expressions is that you can often do a lot of stuff with a single regular expression instead of having to complicate things by looping through a bunch of separate expressions. Do you get my drift here?

Okay, I created a single regex but for some reason the code isn’t doing anything at all. It was at least throwing me something before in the console. But now, it isn’t throwing me any errors nor is it giving me an output.

Here’s my code:

let resultsDiv = document.getElementById("results-div");
let checkBtn = document.getElementById("check-btn");
let clearBtn = document.getElementById("clear-btn");
let userInput = document.getElementById("user-input");
/*const numberRegex = [/^1? ?(( ?\d{3} [- ]*)|(\( ?\d{3}[- ]*\) *))\d{3}[- ]?\d{4}$/gm, /\d{10}/gm, /\d*\(\d[\d)]{3}\d{3}-\d{4}/gm, /\d{3}-\d{3}-\d{4}/gm, /^\d\s\d{3}-\d{3}-\d{4}/gm];*/

const numberRegex = /(1\s?)?(\d(3)|\(?\d{3}\)?|)[\-\s]?\d{3}[\-\s]?\d{4}$/gm

const input = userInput.value;

const check = (pattern) => numberRegex.some( () => {
  pattern.test(input)
})

const matchNumber = () => {
 
  
  if (userInput.value === ""){
    window.alert("Please provide a phone number");
  } else if(numberRegex.test(input))
    /*(numberRegex.some(numberRegex, (pattern) => 
    pattern.test(input))*/{
      console.log(numberRegex.test(input));
     resultsDiv.textContent = 
  `Valid US number: ${userInput.value}`;} else{`"Invalid US number: ${userInput.value}"`
  }
}


//matchNumber()
/*function checkIfNumber(){
  if (userInput.value === ""){
   resultsDiv.textContent = "Please provide a phone number";
  }
  else {
    return;
  }
}*/

const clear = () => {
  resultsDiv.textContent = "";
}
checkBtn.addEventListener("click", matchNumber(input));

clearBtn.addEventListener("click", clear)

The second argument to addEventListener is wrong. Yes, it takes a function, but just that, the name of a function, you don’t want to actually call the function.

Okay.

I changed the code a bit and it’s returning true and false (alternating between the two) but that’s it. Here’s my code. I feel like I’m on my way but I still don’t know what I’m doing wrong.

let resultsDiv = document.getElementById("results-div");
let checkBtn = document.getElementById("check-btn");
let clearBtn = document.getElementById("clear-btn");
let userInput = document.getElementById("user-input");
/*const numberRegex = [/^1? ?(( ?\d{3} [- ]*)|(\( ?\d{3}[- ]*\) *))\d{3}[- ]?\d{4}$/gm, /\d{10}/gm, /\d*\(\d[\d)]{3}\d{3}-\d{4}/gm, /\d{3}-\d{3}-\d{4}/gm, /^\d\s\d{3}-\d{3}-\d{4}/gm];*/

const numberRegex = /(1\s?)?(\d(3)|\(?\d{3}\)?|)[\-\s]?\d{3}[\-\s]?\d{4}$/gm

const input = userInput.value;

const check = (pattern) => numberRegex.some( () => {
  pattern.test(input)
})

const matchNumber = () => {
 
  
  if (userInput.value === ""){
    window.alert("Please provide a phone number");
  } else {  
    numberRegex.test(userInput.value)? 
    resultsDiv.textContent = `Valid US number: ${userInput.value}` | resultsDiv.textContent = `"Invalid US number: ${userInput.value}"`;
        console.log(numberRegex.test(userInput.value));
    /*(numberRegex.test(userInput.value)=== 1)
{
      console.log(numberRegex.test(input));
     resultsDiv.textContent = 
  `Valid US number: ${userInput.value}`;} else{`"Invalid US number: ${userInput.value}"`;*/
  }
}


//matchNumber()
/*function checkIfNumber(){
  if (userInput.value === ""){
   resultsDiv.textContent = "Please provide a phone number";
  }
  else {
    return;
  }
}*/

const clear = () => {
  resultsDiv.textContent = "";
}
checkBtn.addEventListener("click", matchNumber);

clearBtn.addEventListener("click", clear)

Your code can’t be returning anything because this is not valid JS. You should be seeing a syntax error in the console pane. And perhaps a squiggly red underline in the JS editor.

P.S. Your one line regex is close, but it still needs a few tweaks to be perfect. Don’t give up on it. This can definitely be solved with just one regex.