Build a Telephone Number Validator

JavaScript
1

My result is not showing and I don’t know what the problem is and I also don’t know if my regex is correct.

**HTML**
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="sylesheet" href="./styles.css">
    <title>Telephone Number Validator</title>
  </head>
  <body>
    <div class="container">
      <h1>Telephone Number Validator</h1>
      <div class="phone">
        <div class="circle"></div>
        <div class="input">
          <label for="user-input">Enter a Phone Number:</label>
          <input id="user-input" value="">
          <div id="results-div"></div>
        </div>
        <div class="btn">
          <button id="check-btn">Check</button>
          <button id="clear-btn">Clear</button>
        </div>
      </div>
    </div>
    <script src="./script.js"></script>
  </body>
</html>type or paste code here

**CSS**
*{
  padding:0;
  margin:0;

}
body{
  background-color:#536878;
  
}
.container{
  display:flex;
  flex-direction: column;
  align-items:center;
}
h1{
  margin-top:40px;
  font-size:45px;
}
.phone{
  width:350px;
  height:520px;
  background-color:#1b1b32;
  border-radius:15px;
  margin-top:30px;
  margin-bottom:40px;
  display:flex;
  flex-direction: column;
  align-items:center;
}
.input{
  margin: 30px;
  background-color:#fff;
  height:300px;
  width:290px;
  display:flex;
  flex-direction: column;
  align-items:center;
  padding-top:20px;
  margin-top:70px
}
.btn{
  display:flex;
  flex-direction: row;
  align-items:center;
}
button {
  width:100px;
  height:40px;
  font-size: 30px;
  margin:0 20px;
  padding:5px;
}
input{
  padding:20px;
  border-radius:20px;
  margin-top:20px;
}
label{
  font-size:25px;
}
.circle{
  height: 5px;
  width:15px;
  background-color:#fff;
  border-radius: 20px;
  padding-top: 10px;
  margin-top:17px;
  margin-bottom:0;
  display:flex;
  flex-direction: row;
  align-items:center;
}

**JS script**
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 regexOne = /(?:^)1\s(\d{3})[-](\d{3})[-](\d{4})(?:$)/;
const regexTwo = /(?:^)1\s\((\d{3})\)\s(\d{3})[-](\d{4})(?:$)/;
const regexThree = /(?:^)1\((\d{3})\)(\d{3})[-](\d{4})(?:$)/;
const regexFour = /(?:^)1\s(\d{3})\s(\d{3})\s(\d{4})(?:$)/;
const regexFive = /(?:^)(\d{10})(?:$)/;
const regexSix = /(?:^)(\d{3})[-](\d{3})[-](\d{4})(?:$)/;
const regexSeven = /(?:^)\((\d{3})\)(\d{3})[-](\d{4})(?:$)/;

validList = [regexOne, regexTwo, regexThree, regexFour, regexFive, regexSix, regexSeven];

const validNo = (str) => validList.some((regex) => regex.test(str));

checkBtn.addEventListener("click", (e) =>{
  e.preventDefault();
  if(userInput.value === ""){
    alert("Please provide a phone number")
    return;
  }else if(userInput.value === validNo){
  results.innerText = `Valid US Number:${userInput.value}`;
  userInput.value = "";
} else{
  results.innerText = `Invalid US number:${userInput.value}`;
  userInput.value = "";
}

});

clearBtn.addEventListener("click", (e) => {
  e.preventDefault();
  results.innerText = "";
  userInput.value = "";
})
2

You should declare this with const or let. This will fix the issue with your code not returning a result when you hit the Check button.

I’m not going to try to unpick all of your regexes to find out why the tests are not returning the correct value, but you should be able to solve this challenge with a single regex, which can cover all possible cases.

1 Like
3

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