Regex tests not passing in telephone number validator

JavaScript
1

None of the regex tests are passing but they all work fine when I test them directly in the tool.

script.js —

const userInput = document.getElementById("user-input");
const checkBtn = document.getElementById("check-btn");
const clearBtn = document.getElementById("clear-btn");
const results = document.getElementById("results-div");

const isValid = str => {
    const regex = /^(?:1\s|1)?(?:\(\d{3}\)\s?|\d{3}(?:\s|-)?)\d{3}(?:-|\s)?\d{4}$/;
    return regex.test(str) ? true : false;
}

checkBtn.addEventListener("click", () => {
    const str = userInput.value.trim();
    if (str === "") {
        alert("Please provide a phone number");
        return;
    } 
    userInput.value = "";
    results.insertAdjacentHTML("afterbegin",`<p class="results-text">${isValid(str) ? "Valid" : "Invalid"} US number: <br />${str}</p>`); 
});

clearBtn.addEventListener("click", () => results.innerHTML = "");

link to challenge: Build a Telephone Number Validator Project: Build a Telephone Number Validator | freeCodeCamp.org

2

Hi there!

You need post your full code and link to the challenge.

3

I’ve edited my original post to include code from scripts.js and the project link. I’d appreciate if you’d take a look. Thanks.

4

please add your html too

5

I’ve edited your code for readability. 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 (').

6

Thanks for the info!

7 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Telephone Number Validator</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <main>
      <h1>Telephone Number Validator</h1>
      <div class="phone-container">
        <div class="phone-background">
          <div class="phone-camera"></div>
        </div>
        <label for="user-input">Enter a Phone Number:</label>
        <input maxlength="20" type="text" id="user-input" value="" />
        <div id="results-div"></div>
        <div class="phone-footer">
          <button class="btn-styles" id="check-btn">Check</button>
          <button class="btn-styles" id="clear-btn">Clear</button>
        </div>
      </div>
    </main>
    <script src="script.js"></script>
  </body>
</html>
8

Please disregard. I figured out what the testing issue was and corrected it. The tests now pass.

9

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.