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;
}