Tell us what’s happening:
My regex to check phone numbers doesn’t work no matter how i change it. It works on regex101. Did I make a mistake?
Your code so far
<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=500, initial-scale=1.0" />
<link href="styles.css" rel="stylesheet" />
<title>Phone Number Validator</title
</head>
<body>
<h1 id="title"> Rain's Telephone Number Validator</h1>
<input id="user-input"></input>
<button id=check-btn>Check</button>
<button id="clear-btn">Clear</button>
<span id="results-div"></span>
<script src="script.js"></script>
</body>
</html>
/* file: script.js */
const userInput = document.getElementById("user-input");
const checkBtn = document.getElementById("check-btn");
const clearBtn = document.getElementById("clear-btn");
const results = document.getElementById("results-div");
checkBtn.addEventListener("click", () => {
if (userInput.value === "") {
alert("Please provide a phone number")
} else if (regex.test(toString(userInput.value) === true)) {
results.innerText = `Valid US number: ${userInput.value}`;
} else {
results.innerText = `Invalid US number: ${userInput.value}`;
}
});
clearBtn.addEventListener("click", () => {
results.innerText = "";
});
const regex = /^[1]{0,1}[\s]?[(]?[\d]{3}[)]?[-\s]?[\d]{3}[-\s]?[\d]{4}$/g;
/* file: styles.css */
*, ::before, ::after {
box-sizing: border-box;
margin: 0;
padding: 0;
align-items: center;
}
body {
background: #59CE8F;
}
#title {
margin-bottom: 10px;
}
#user-input {
width: 150px;
border-top: solid black;
border-bottom: solid black;
border-left: solid black;
border-right: solid black;
}
#check-btn, #clear-btn {
background: #FFFFFF;
}
#results-div {
margin-top: 10px;
background: white;
display: block;
border-top: solid black;
border-bottom: solid black;
border-left: solid black;
border-right: solid black;
padding: 10px 50px 30px 0;
}
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/126.0.0.0 Safari/537.36
Challenge Information:
Build a Telephone Number Validator Project - Build a Telephone Number Validator
which testcases are failing?
the parens here may be the problem
the regex.test is getting the value true instead of the value of the string you want to test
these: When the
#user-input
element contains
1 555-555-5555
and the
#check-btn
element is clicked, the
#results-div
element should contain the text
"Valid US number: 1 555-555-5555"
. When the
#user-input
element contains
1 (555) 555-5555
and the
#check-btn
element is clicked, the
#results-div
element should contain the text
"Valid US number: 1 (555) 555-5555"
. When the
#user-input
element contains
5555555555
and the
#check-btn
element is clicked, the
#results-div
element should contain the text
"Valid US number: 5555555555"
. When the
#user-input
element contains
555-555-5555
and the
#check-btn
element is clicked, the
#results-div
element should contain the text
"Valid US number: 555-555-5555"
. When the
#user-input
element contains
(555)555-5555
and the
#check-btn
element is clicked, the
#results-div
element should contain the text
"Valid US number: (555)555-5555"
. When the
#user-input
element contains
1(555)555-5555
and the
#check-btn
element is clicked, the
#results-div
element should contain the text
"Valid US number: 1(555)555-5555"
. When the
#user-input
element contains
1 555 555 5555
and the
#check-btn
element is clicked, the
#results-div
element should contain the text
"Valid US number: 1 555 555 5555"
. When the
#user-input
element contains
1 456 789 4444
and the
#check-btn
element is clicked, the
#results-div
element should contain the text
"Valid US number: 1 456 789 4444"
.
I removed toString and left test on codepen and the numbers came back valid. This was in your click event else if condition but its still not passing with 1 (555) 555 - 5555 or any that are valid?
after removing toString() , this is what doesn’t pass:
When the
#user-input
element contains
1 (555) 555-5555
and the
#check-btn
element is clicked, the
#results-div
element should contain the text
"Valid US number: 1 (555) 555-5555"
. When the
#user-input
element contains
555-555-5555
and the
#check-btn
element is clicked, the
#results-div
element should contain the text
"Valid US number: 555-555-5555"
. When the
#user-input
element contains
1(555)555-5555
and the
#check-btn
element is clicked, the
#results-div
element should contain the text
"Valid US number: 1(555)555-5555"
. When the
#user-input
element contains
1 555)555-5555
and the
#check-btn
element is clicked, the
#results-div
element should contain the text
"Invalid US number: 1 555)555-5555"
. When the
#user-input
element contains
1 555 555 5555
and the
#check-btn
element is clicked, the
#results-div
element should contain the text
"Valid US number: 1 555 555 5555"
. When the
#user-input
element contains
555)-555-5555
and the
#check-btn
element is clicked, the
#results-div
element should contain the text
"Invalid US number: 555)-555-5555"
.
Please show your new code. Hopefully you fixed the parentheses issue.
Here’s my new code:
const checkBtn = document.getElementById("check-btn");
const clearBtn = document.getElementById("clear-btn");
const results = document.getElementById("results-div");
checkBtn.addEventListener("click", () => {
if (userInput.value === "") {
alert("Please provide a phone number")
} else if (regex.test(toString(userInput.value) === true)) {
results.innerText = `Valid US number: ${userInput.value}`;
} else {
results.innerText = `Invalid US number: ${userInput.value}`;
}
});
clearBtn.addEventListener("click", () => {
results.innerText = "";
});
const regex = /^[1]{0,1}[\s]?[(]?[\d]{3}[)]?[-\s]?[\d]{3}[-\s]?[\d]{4}$/gm;
the tests i sent earlier still don’t pass
This code is not doing what you think it is doing. It is trying to test the regex on a boolean not a string.
Also as mentioned to you before, userInput.value is already a string.
when i removed it, the code wasn’t working as well
What do you think toString does? If user input.value is already a string?
What about what do you think it does when you compare a string to the value true?
Try something like this code to see:
let bool = ("a string" === true);
console.log(bool);
also i don’t get how to make parenthesis optional without making the area code optional as parenthesis are around the area code
I was not suggesting you to make the parens optional in the phone number or anywhere?
(Or are you asking me how to make the parens optional so you can recognize a valid telephone number?)
input.value is a number so i wanted to convert it to string to compare it. i’m comparing the result of calling test on regex with input.value passed to it
no, i need it to pass one of the tests
I disagree.
To check try to log this:
console.log(`Is it a string? ${typeof userInput.value === "string"}`);
You can chain different patterns to each other with the | pipe. So if you have two patterns and they can both happen, write one pattern first and then use the pipe to add more.
let regex = /dust((?:red)|(?:black))rose/;
For eg above should match either dustblackrose or dustredrose
I see now. Well, i really thought that a sequence of numbers isn’t a string. Now I know i was wrong. Thanks. I took it out already.
1 Like
I tried to but it’s not working on freecodecamp or on regex101. It either matches full parenthesis and one half or no parenthesis at all.
