Build a Telephone Number Validator Project - Build a Telephone Number Validator

JavaScript
1

Tell us what’s happening:

The final two test cases are the ones not passing. please help me.I have completed the other certification projects. two test cases are: * 35. When the #user-input element contains a valid US number and the #check-btn element is clicked, the #results-div element should contain the text "Valid US number: " followed by the number.

  • Failed:36. When the #user-input element contains an invalid US number and the #check-btn element is clicked, the #results-div element should contain the text "Invalid US number: " followed by the number.

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>US Phone Number Validator</title>
    <style>
        body { font-family: Arial, sans-serif; text-align: center; margin-top: 50px; }
        input { padding: 10px; width: 250px; margin-bottom: 10px; }
        button { padding: 10px; margin: 5px; cursor: pointer; }
        #results-div { margin-top: 20px; font-size: 18px; font-weight: bold; }
    </style>
</head>
<body>

    <h2>US Phone Number Validator</h2>
    <input type="text" id="user-input" placeholder="Enter US phone number">
    <br>
    <button id="check-btn">Check</button>
    <button id="clear-btn">Clear</button>
    <div id="results-div"></div>

    <script src="script.js"></script>
</body>
</html>

/* file: script.js */
function telephoneCheck(str) {
    // Regular expression for validating US phone numbers
    const re = /^(1\s?)?(\(\d{3}\)|\d{3})([\s.-]?)\d{3}([\s.-]?)\d{4}$/;
    return re.test(str);
}

document.getElementById("check-btn").addEventListener("click", function() {
    let userInput = document.getElementById("user-input").value.trim();
    let resultsDiv = document.getElementById("results-div");

    if (userInput === "") {
        alert("Please provide a phone number");
        return;
    }

    // Make sure output matches test case expectations exactly
    if (telephoneCheck(userInput)) {
        resultsDiv.textContent = "Valid US number: " + userInput;
        resultsDiv.style.color = "green";
    } else {
        resultsDiv.textContent = "Invalid US number: " + userInput;
        resultsDiv.style.color = "red";
    }
});

document.getElementById("clear-btn").addEventListener("click", function() {
    document.getElementById("results-div").textContent = "";
    document.getElementById("user-input").value = "";
});




/* file: styles.css */

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/133.0.0.0 Safari/537.36

Challenge Information:

Build a Telephone Number Validator Project - Build a Telephone Number Validator

2

Can can you show the error that shows up in the console if any?

3

I tested the regex against mine, it works fine. The error is a result of how the test was coded. Add these as global variables.

const clearBtn = document.getElementById("clear-btn");
const userInput = document.getElementById('user-input');
const checkBtn = document.getElementById('check-btn');
const resultsDiv = document.getElementById('results-div');

In the meantime, am melting from rewriting Cash Register for the fourth time. x)

1 Like
4

Add a console.log() to your code which will output the number being evaluated and the result, so you can see what numbers the tests are testing and find out which one is failing.

5

I’ve edited your code for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').