Telephone Validator - RegEx Issues

JavaScript
1

Hello, my code seems to be working, but it’s still giving issues with not finding a number of required Invalid entries. Not quite sure what I still need to add to my regEx? I keep running it through a regEX checker, but I’m not sure what else I still need to mess with.

RegEx is still pretty tricky.

JavaScript

// Const variables grabbing data from DOM
const phoneNumInput = document.getElementById("user-input");
const result = document.getElementById("results-div");
const checkBtn = document.getElementById("check-btn");
const clearBtn = document.getElementById("clear-btn");

// Function for check button to check input, if there is input, run another function
// 1. error message for lack of input
// 2. if there is an input, run a Check function
const checkInput = () => {
  const str = phoneNumInput.value;
  if (str === "") {
    alert("Please provide a phone number");
  } else {
    checkIfValid(str);
  }
};

// Function to check validity of number input
  // 1. sets up regEx to match w/
  // 2. validNum variable is equal to matching the string w/regex
  // 3. if valid, dispplay valid number text
  // 4. if not valid, display invalid text
const checkIfValid = (str) => {
  const validNumRegEx = /[\+1]?[\s]?[(]?[\s]?[0-9]{3}[)]?[-\s\.]?[0-9]{3}[-\s]?[0-9]{4,6}[)]?/;
  const validNum = str.match(validNumRegEx);
  
  if (validNum !== null) {
    result.innerText = `Valid US Number: ${str}`;
  } else {
    result.innerText = `Invalid US Number: ${str}`;
  }
};

// Function to clear result box
const clearResults = () => {
  result.innerText = null;
};

// Onclick event for user input
checkBtn.addEventListener("click", checkInput);
clearBtn.addEventListener("click", clearResults);

HTML / CSS

Summary 
<!Doctype html>
<html lang="en"> 
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta charset="utf-8">
  <link rel="stylesheet" href="styles.css">
  <title>TITLE</title>
</head>
<body>
    <header>
       <h1>Telephone Number Validator</h1>
    </header>
    <main>
        <div class="phone-graphic">
          <div class="screen">
            <h2><center>Enter a Phone Number: </center></h2>
              <input id="user-input"></input>
              <div id="results-div"> 
                The Results show up in this box.
              </div>
          </div>
          <div class="btn-container">
             <button id="check-btn">Check</button>
             <button id="clear-btn">Clear</button>
          </div>
        </div>
    </main>
  <script src="./script.js"></script>
</body>
</html>


*{

    box-sizing: border-box;
    font-family: Arial, Helvetica, sans-serif;

}

body { 
  overflow: hidden;
  background-color: #D1F8FD;
}
header{
    display: flex;
    justify-content: center;
    font-size: 18px;
    color: black;
    text-align: center;
    width: 100vw;
}
main{
  display: flex;
  Justify-content: center;
  padding: 50px;
}

div.phone-graphic{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: #005FD3;
  height: 660px;
  width: 350px;
}

div.screen{
  background-color: #9E9E9F;
  height: 550px;
  width: 320px;
  margin-bottom: 15px;
  
 
}

#user-input{
  display: flex;
  justify-content: center;
  width: 80%;
  height: 50px;

}

#results-div{
  color: black
}

btn-container{
  display: flex;
  justify-content: center;
  gap: 50px;

}

#check-btn{
  width: 80px;
  height: 40px;
  font-size: 20px;

 
}

#clear-btn{
  width: 80px;
  height: 40px;
  font-size: 20px;
}
2

Putting all required patterns in a single regex can be hard and overwhelming. You could try splitting it, to make it more manageable.