Build a Telephone Number Validator

JavaScript
1

I tested the code myself with every test in the project and it works. But when I run the tests all the verifications are confirmed except for the test number 7 and sometimes, not always, even the 8. That is, sometimes the test number 8 is resolved and others fail.

<!--HTML-->

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
        <link rel="stylesheet" type="text/css" href="styles.css" />
        <title>Telephone Number Validator</title>
    </head>
    <body>
        <header>
            <h1>Telephone Number Validator</h1>
            <p>Enter a telephone number to validate its format.</p>
        </header>
        <main>
            <form id="telephoneForm">
                <label for="phoneNumber">Telephone Number:</label>
                <input type="tel" id="user-input" name="phoneNumber" required />
                <div>
                    <button type="submit" id="check-btn">Validate</button>
                    <button type="submit" id="clear-btn">Clear</button>
                </div>
            </form>
            <div id="results-div"></div>
        </main>
        <script src="script.js"></script>
    </body>
</html>

/*CSS*/

/*Global*/
* {
    margin: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
    background-color: #0a82a0;
}

html, body {
    height: 100%;
    margin: 0;
}

/* Header */

header {
    width: 100%;
    height: 25vh;
    background-color: #333;
    color: #fff;
    padding: 10px;
    text-align: center;
    margin: 0 auto;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
}

header h1 {
    font-size: 3em;
    margin: 0 auto;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
}

header p {
    font-size: 1.5em;
    margin: 0 auto;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
    line-height: 1.5;
    padding-top: 25px;
    color: #d66955;
}

/* Main Content */

main {
    width: 80%;
    margin: 0 auto;
    padding: 20px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
    gap: 20px;
    /* background-color: #0da6cc;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
    border-radius: 5px; */
    position: relative;
    top: 25%;
}

#telephoneForm {
    width: 50%;
    padding: 10px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    /* border-radius: 5px;
    background-color: #333;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2); */
    position: relative;
    flex-direction: column;
}

#telephoneForm label {
    font-size: 1.2em;
    margin-bottom: 5px;
    display: block;
    color: #f9f9f9;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
}

#telephoneForm input[type="tel"] { 
    width: 100%;
    padding: 10px;
    border: none;
    border-radius: 5px;
    outline: none;
    font-size: 1.2em;
    margin-bottom: 10px;
    background-color: rgba(20, 188, 230, 0.103);
    box-shadow: 0 5px 5px rgba(0, 0, 0, 0.2);
    color: #f9f9f9;
    letter-spacing: 0.1em;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
    text-align: center;
}

#telephoneForm input[type="tel"]:focus {
    background-color: rgba(20, 188, 230, 0.203);
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}

#telephoneForm div {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 10px;
}

#telephoneForm button {
    width: 100%;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    background-color: #333;
    color: #fff;
    font-size: 1.2em;
    letter-spacing: 0.1em;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
    cursor: pointer;   
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

#telephoneForm button:hover {
    background-color: #222;
    color: #fff;
}

/* Validation Result */

#results-div {
    display: block;
    width: 50%;
    padding: 10px;
    margin-top: 20px;
    background-color: rgba(20, 188, 230, 0.103);
    border-radius: 5px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
    color: #fff;
    font-size: 1.2em;
    letter-spacing: 0.1em;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
    text-align: center;
    transition: all 0.3s ease;
    opacity: 0;
    visibility: hidden;
    position: relative;
    top: -50px;
}

#results-div.show {
    opacity: 1;
    visibility: visible;
    top: 0;
}



// JAVASCRIPT

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

// Function to validate the phone number
const validateNumber = event => {
    event.preventDefault(); // Prevent the form from submitting
    const number = userInput.value.trim();

    // Regular expressions for US phone numbers
    const regex1 = /^1?\s?(?:\(\d{3}\)|\d{3})[-\s]?\d{3}[-\s]?\d{4}$/;
    
    if (userInput.value === ''){
        return alert('Please provide a phone number');
    } else if (regex1.test(number)) {
        resultsDiv.classList.add('show');
        resultsDiv.textContent = `Valid US number: ${number}`;
    } else {
        resultsDiv.classList.add('show');
        resultsDiv.textContent = `Invalid US number: ${number}`;
    }
    
    userInput.value = '';
    userInput.focus();
    return;
}

// Function to clear the phone number field
const clearFields = event => {
    event.preventDefault();
    userInput.value = '';
    resultsDiv.classList.remove('show');
    resultsDiv.textContent = '';
    userInput.focus(); // Focus the input field for the next input
    return;
}

// Add event listeners to the buttons
checkBtn.addEventListener('click', validateNumber);
clearBtn.addEventListener('click', clearFields);


// Example usage

// Validate a phone number

validateNumber(); // Call the function to validate the phone number

// Clear the phone number field

clearFields(); // Call the function to clear the phone number field


C O N S O L E
WHEN ONLY NUMBER 7 FAIL
// running tests
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".
// tests completed
// console output
Uncaught TypeError: Cannot read properties of undefined (reading 'preventDefault')

WHEN NUMBER 7 AND NUMBER 8 FAILS
// running tests
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".
// tests completed
// console output
Uncaught TypeError: Cannot read properties of undefined (reading 'preventDefault')

I already tried to reformatting the regexp in various way like:
const regex1 = /^1?\s?(?:((\d{3}))|\d{3})[-\s]?\d{3}[-\s]?\d{4}$/;
const regex1 = /^1?\s?(\d{3})|\d{3}[-\s]?\d{3}[-\s]?\d{4}$/;
const regex1 = /^1?\s?((\d{3}))|(\d{3})[-\s]?\d{3}[-\s]?\d{4}$/;

I think that the bug might be in this part of regex: (?:(\d{3})|\d{3}). Where it should match (555) or 555.

If it’s my fault. Or maybe it’s a bug from the website side, taking into account the behaviour of test number 8… idk, please help

2

when you do this, what’s event?
do not call the function, let the click trigger it

3

Yes, I know about that error on preventDefault. But, however, if I try to comment it out and remove the argument, the tests still fails.
About the two function calls at the bottom, I just forgot to comment them out. They were there for testing purpose. But, even removing them doesn’t solve this issue

4

Your issue is here, the first test doesn’t see the element, and fail. At that point the .show class is added, and the other tests don’t have an issue

5

OH YEAH. Thank you so much, really! After all this time spent on it, now, I really feel like that I’ve learned something really important. Have a nice one!