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

JavaScript
1

Tell us what’s happening:

Describe your issue in detail here.
I have created a handle click function that checks both valid and invalid regex patterns. The regex pattern for correct US numbers is working fine (all valid number combinations passing the test) and was pretty easy to do. But the invalid patterns are turning out to be a pain in the butt. I have an invalidPatterns array which can hold any number of regex patterns that will be passed through the for/of loop, but I have spent 2 days and not one test is passing for invalid numbers. I tried to pass each regex pattern separately (such as 555-5555 or 5555555) and one big regex which is totally ugly, but no success. In fact sometimes it makes some of the valid number combinations fail. I’m not expecting a solution but maybe I can’t see the trees for the forest and a point in the right direction would be appreciated. It’s driving me insane at this stage.

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">

</head>
<body>
  <input type="text" id="user-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 */
body {
  background: #555;
}
#check-btn {
  background-color: orange;
}
#results-div {
  margin-top: 20px; 
  width: 280px;
  height: 200px;
  background-color: #fff;
}

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

const handleClick = () => {
  const input = userInput.value;
  const regex = /^(1\s?)?(\(\d{3}\)|\d{3})[-\s]?\d{3}[-\s]?\d{4}$/;

  const invalidPatterns = [
    /^\d{3}-\d{4}$/,
    // /^(\d{3}-\d{4}|\d{7}|1\s\d{3}\)\d{3}-\d{4}|\(\d{10}\)|\d\s\(\d{3}\)\s\d{3}-\d{4}|-\d\s\(\d{3}\)\s\d{3}-\d{4}|2\s\d{3}\s\d{3}-\d{4}|10\s\(\d{3}\)\s\d{3}-\d{4}|\(\d{3}\)\d{8}|2\(\d{3}\)\d{3}-\d{4}|\d{3}\)-\d{3}-\d{4}|\(\d{3}-\d{3}-\d{4}|\(\d{3}\)5\(55\?\)-\d{4}|\d{2}\s\d{2}-\d{2}-\d{3}-\d)$/
];

  if (input === "") {
    alert("Please provide a phone number");
  } else {
    let invalid = false;
    for (const invalidPattern of invalidPatterns) {
      if (invalidPattern.test(input)) {
        results.textContent = "Invalid US number: " + input;
        invalid = true;
        break; 
      }
    }
    if (!invalid && regex.test(input)) {
      results.textContent = "Valid US number: " + input;
    } else {
      results.textContent = "Invalid US number";
    }
  }
};

const handleClear = () => {
  results.textContent = "";
};

checkButton.addEventListener("click", handleClick);
clearButton.addEventListener("click", handleClear);

Your browser information:

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

Challenge Information:

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

2

You appear to have created this post without editing the template. Please edit your post to Tell us what’s happening in your own words.

3

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