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

JavaScript
1

Tell us what’s happening:

I believe my code should work for this case, but the test fails:

When the #user-input element contains 1 (555) 555-5555 and the #check-btn element is clicked, the #results-div element should contain the text "Valid US number: 1 (555) 555-5555" .

I have checked this regex on an external site as well, and it should cover that case as well. What am I missing?

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">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>HTML 5 Boilerplate</title>
    <link rel="stylesheet" href="./styles.css">
  </head>
  <body>
    <form>
      <input id="user-input" name="user-input">
      <button id="check-btn" name="check-btn">Check</button>
      <button id="clear-btn" name="clear-btn">Clear</button>
    </form>
    <div id="results-div"></div>
	<script src="./script.js"></script>
  </body>
</html>

/* 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 usPhoneRegex = /(1)?( )?(\d\d\d|\(\d\d\d\))[\-| ]?\d\d\d[\-| ]?\d\d\d\d/g

const isValidUSPhone = (string) => usPhoneRegex.test(string) 

const checkInput = () => {

  const inputValue = input.value;

  results.textContent = ""

  if (inputValue == "") {
    alert("Please provide a phone number")
  } else if (isValidUSPhone(inputValue)) {
    results.textContent = "Valid US number: " + inputValue;
  } 
}


const clearForm = () => {
  input.value = ""
  results.textContent = ""
}

clearBtn.addEventListener("click", clearForm)
checkBtn.addEventListener("click", checkInput)

/* file: styles.css */

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/127.0.0.0 Safari/537.36

Challenge Information:

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

2

Welcome to the forum @nerdyhiker

image

The regular expression in your code appears to allow invalid numbers as valid.

Happy coding

3

Thanks. I’ve updated the regex and it should handle your case as well - ^(1)?( )?(\d\d\d|\(\d\d\d\))[\-| ]?\d\d\d[\-| ]?\d\d\d\d$

However, even without it, it still does not solve the issue i raised, which is that the specific test fails even though it should pass.

4

Nevermind. Found the issue. Should not have used a global flag on the regex string.

1 Like