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

JavaScript
1

Tell us what’s happening:

Hello,

I have completed most of the tests but I fail in 5 of them. Is there any way I could modify the regex for those specific tests, without affecting the solved ones? Or do I need to redo this in a completely different way?

Thanks!

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>Telephone Number Validator</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>

    <header>
        <h1 id="title">Telephone Number Validator</h1>
    </header>

    <main>
        <h3 id="heading">Enter a Phone Number</h3>
        <input id="user-input">
        <div id="buttons">
        <button id="check-btn">Check</button>
        <button id="clear-btn">Clear</button>
    </div>
    <div id="results"></div>
        <p id="results-div">
        </p>
    </div>
    </main>

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

/* file: script.js */
const userInput = document.getElementById("user-input").value;
const result = document.getElementById("results-div")
const checkBtn = document.getElementById("check-btn");
const clearBtn = document.getElementById("clear-btn")


checkBtn.addEventListener("click", ()=>{

       const userInput = document.getElementById("user-input").value;

    const isValidFormat = userInput.replace(/[a-zA-Z\s\-()]/g, '');


        if (userInput.length === 0) {
        alert("Please provide a phone number");
    } else if (isValidFormat && isValidFormat.length === 10) {
        result.innerHTML = "Valid US Number: " + userInput;
    } else if (isValidFormat && isValidFormat.length === 11 && userInput.slice(0, 1) === "1") {
        result.innerHTML = "Valid US Number: " + userInput;
    } else if(isValidFormat && isValidFormat.length === 11 && userInput.slice(0, 1) !== "1") {
        result.innerHTML = "Invalid US Number: " + userInput;
    } else{
        result.innerHTML = "Invalid US Number: " + userInput;
    }
});



clearBtn.addEventListener("click", ()=>{
    document.getElementById("user-input").value="";
    result.innerHTML = "";

})



/* file: styles.css */
body{
    text-align: center;
    margin-top: 25vh;
}


#user-input{
    margin-bottom: 20px;
    width: 130px;
}

#buttons{
    padding: 10px;
}

#check-btn, #clear-btn{
    font-size: 15px;
    padding: 5px;
    
}

#results{
    margin-top: 65px;
}

#results-div {
    font-size: 25px;
}

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 Edg/126.0.0.0

Challenge Information:

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

2

there are ways to modify the regex to make it more general (encompass more matches). Have you considered using look-aheads? (not sure if these were taught to you or not)

3

No, this is the first time I am hearing of look-aheads. Can you link them to me?

4

You can look up other articles but here is one:

1 Like
5

Also the legacy is course at fcc has an exercise for it https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/regular-expressions/positive-and-negative-lookahead

1 Like