Build a Telephone Number Validator

JavaScript
1

I need some help, my Telephone Number Validator seems to be working as described, but I am not passing any of the tests. I need some help understanding where I am going wrong or where the issue is in my code.

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 regex = /^(1\s?)?(\(\d{3}\)|\d{3})([\s-]?)\d{3}([\s-]?)\d{4}$/;

const numberValidator = (phoneNumber) => {
return regex.test(phoneNumber)
};

const getResults = () =>{
  const phoneNumber = userInput.value;
  if(phoneNumber ===""){
    return alert("Please provide a phone number")
  } else if (numberValidator(phoneNumber)) {
    results.textContent = `"Valid US number: ${userInput.value}"`;
  } else{
    results.textContent =`"Invalid US number: ${userInput.value}"`
  }
};

const clearResults =()=>{
  userInput.value = "";
  results.textContent = "";
};

checkBtn.addEventListener("click", getResults);
clearBtn.addEventListener("click", clearResults);

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

body {
  font-family: Arial, sans-serif;
  background-color: #f9f9f9;
  color: #333;
  margin: 0;
  padding: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  box-sizing: border-box;
}

/* Container for all content */
.container {
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  padding: 30px;
  max-width: 400px;
  width: 100%;
  text-align: center;
}

/* Input styling */
#user-input {
  width: 100%;
  padding: 10px;
  margin-bottom: 20px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 16px;
  box-sizing: border-box;
}

/* Button styling */
button {
  padding: 10px 20px;
  margin: 5px;
  border: none;
  border-radius: 4px;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s;
}
/* Check button styling */
#check-btn {
  background-color: #28a745;
  color: white;
}

#check-btn:hover {
  background-color: #218838;
}

/* Clear button styling */
#clear-btn {
  background-color: #dc3545;
  color: white;
}

#clear-btn:hover {
  background-color: #c82333;
}

/* Results div styling */
#results-div {
  margin-top: 20px;
  font-size: 14px;
  color: #666;
}
2

Hello there!

Post the rest of your code. The HTML and CSS.

1 Like