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

JavaScript
1

Tell us what’s happening:

My 4 tests are not passing(15, 30, 31 and 36).

15, 30 and 31 are due to regex error and I know I need to use a “or” operator but I am not able to think how to implement it. Please guide me.

Also I am not sure why 36th test is not passing.

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <link href="styles.css">
  </head>
  <body>
    <div class="container">
    <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: styles.css */
body {
  background-color: black;
  color: lightgrey;
}

#results-div {
  border: 1px solid grey;
  width: 90vw;
  height: 10vh;
}

.container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: column;
  gap: 10px;
}

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

function checkInput(input) {
  if(input === "") {
    alert("Please provide a phone number");
    return;
  };

  let regex = /^[1]?[\s]*[(]*\d{3}[)]*[-]*[\s]*\d{3}[-]*[\s]*\d{4}$/gi;
  let testing = regex.test(input);
  
   if(testing === true) {
    return `Valid US number: ${input}`;
  } else if(testing === false) {
    return `Invalid US number: ${input}`;
  }
}

checkBtn.addEventListener("click", () => {
  result.textContent = checkInput(userInput.value);
  userInput.value = "";
});

clearBtn.addEventListener("click", () => {
  result.textContent = "";
});

Your browser information:

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

Challenge Information:

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

2

You can test your regex here:

And you can use multiple regex patterns to test if that will make it easier.

3

This didn’t helped. I am not able to formulate the logic.

Also what about 36th test ?

4

What have you tried so far to debug your code?

5

I tried implementing the OR operator in regex but my logic is flawed, I need help with it.

And with 36th test, I cleared that part and wrote it again. Still I am not able to find the error.

6

Did you try using the regex tester tool? It will give you valuable feedback about what is being matched and what is not. If you don’t understand how to use it, I can help with that.

Update: The regex “or” operator is “|”.

7

I used the link you shared, there only I tested my regex.

Edit: I used “|” only

8

The tests that are failing all match a “(” or “)” separately, but your regex pattern needs to be changed to make sure if there is a “(”, there is also a “)”. Can you think of how you could do that?

What did you discover testing your regex pattern in the testing tool?

9

Yes I understand that but I said you I am not able to think how to it.

I had tried many ways e.g. (^[(]*\d{3}[)]*$)

Edit: I understand how the above one wrong but also I am not able to think about a correct way so that, I can tell the program - “If brackets present then both should be there”

10

Also when I tried this - ([\(*\d{3}\)*]|\d{3})

15, 30 and 31 test passed but broke others

Please help me.

11

I would stick with the regex tool right now rather than continuing to run the FCC tests. The tests won’t help you fix the pattern - the tool will. In your last regex pattern:

What do you expect that to match?

12

I am testing in regex 101 only, not using console at FCC.

I am expecting - If brackets present in input then both should be present there or none

13

Okay. So in the tester, if you enter (555), does that pattern match?

14

I think I got it, bracket is mandatory so I will remove the quantifier.

15

Yes, I passed all test.

Should I submit and go to next challenge ?

Edit: just removed the quantifier from last logic

16

That’s great! Congratulations on figuring it out!!

1 Like
17

Thank you very much :slight_smile:

1 Like