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

JavaScript
1

Tell us what’s happening:

I think there’s something wrong with my regex code but I don’t know what it is can someone please point me in the right direction

Your code so far

<!-- file: index.html -->
<div>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css" />
    <link rel="scriptsheet" href="./script.js" />
    <title></title>
  </head>
  <body>
    <h3>Telephone Number Validator<h3>
      <hr>
<input type="text" id="user-input" placeholder="Input Text" />
<br>
<br>
<button id="check-btn" onclick="checkPhoneNumber()">check</button>
<br>
<br>
<button id="clear-btn" onclick="clearResults()">clear</button>
<div id="results-div"></div>
<script src="./script.js"></script>
  </body>
</div>

/* file: styles.css */
 body {
      font-family: Arial, sans-serif;
      margin: 20px;
    }

    #results-div {
      margin-top: 10px;
      padding: 10px;
      border: 1px solid #ccc;
    }

/* file: script.js */
const checkButton = document.getElementById('check-btn');
const clearButton = document.getElementById('clear-btn');
const userInput = document.getElementById('user-input').value;
const results = document.getElementById('results-div');

checkButton.addEventListener('click', () => {
if (userInput === '') {
  alert('Please provide a phone number')
}
});
clearButton.addEventListener('click', () => results.remove());

function checkPhoneNumber() {
      // Regular expression for validating US phone numbers
// editable area
     const phoneRegex = /^1?[-.\s\(\)]*([2-9][0-9]{2})[-.\s\(\)]*([2-9][0-9]{2})[-.\s\(\)]*([0-9]{4})$/;
// editable area
     if (phoneRegex.test(userInput)) {
        results.textContent = "Valid US number: " + userInput;
      } else {
        results.textContent = "Invalid US number: " + userInput;
      }
    }

    function clearResults() {
      document.getElementById("results-div").textContent = "";
    }

Your browser information:

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

Challenge Information:

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

2

Please in need help i’m still stuck here

3

What kind of error are you getting or what test are you not passing. Do you have a question about something?

I really recommend the site https://regex101.com/ for troubleshooting (and learning) regex.

When I did this project I used many different regex to solve it, instead of 1 huge regex for every possible variation…

4

Your HTML is not valid. Also, make sure you load the script one time at the bottom of the HTML before the closing body tag.

You have to get the input value when the check button is clicked, not just when the initial code runs. Use the event listener you added to the check button element and remove the inline one from the HTML. You can call checkPhoneNumber from within the check button handler and pass it the user input value.

You should not remove the results-div element, only clear its content.

If I fix that, you will pass all but three tests and they are issues with the regex.

1 Like
5

This is my current html code

<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css" />
    <link rel="scriptsheet" href="./script.js" />
    <title></title>
  </head>
  <body>
    <h3>Telephone Number Validator<h3>
      <hr>
<input type="text" id="user-input" placeholder="Input Text" />
<br>
<br>
<button id="check-btn" onclick="checkPhoneNumber(userInput).value">check</button>
<br>
<br>
<button id="clear-btn" onclick="clearResults()">clear</button>
<div id="results-div"></div>
<script src="./script.js"></script>
  </body>
</html>

my script is still the same i just want to be sure if they are no more errors in my html now

6

You can validate it.

https://validator.w3.org/nu/#textarea

You still have the script twice. Remove the one in the head element (also its rel value isn’t valid).

7

my new html code

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title>Telephone Number Validator</title>
  </head>
  <body>
    <h3>Telephone Number Validator</h3>
     <hr> 
<input type="text" id="user-input" placeholder="Input Text">
<br>
<br>
<button id="check-btn" onclick="checkPhoneNumber()">check</button>
<br>
<br>
<button id="clear-btn" onclick="clearResults()">clear</button>
<div id="results-div"></div>
<script src="./script.js"></script>
  </body>
</html>
8

after changing the html code only the first 6 test passed. This is my current script please what’s wrong with it ??

const checkButton = document.getElementById('check-btn');
const clearButton = document.getElementById('clear-btn');
const userInput = document.getElementById('user-input').value;
const results = document.getElementById('results-div');

checkButton.addEventListener('click', () => {
if (userInput === '') {
  alert('Please provide a phone number')
}
});
clearButton.addEventListener('click', () => results.remove());

function checkPhoneNumber() {
      // Regular expression for validating US phone numbers
      const phoneRegex = /^1?[-.\s\(\)]*([2-9][0-9]{2})[-.\s\(\)]*([2-9][0-9]{2})[-.\s\(\)]*([0-9]{4})$/;

     if (phoneRegex.test(userInput)) {
        results.textContent = "Valid US number: " + userInput;
      } else {
        results.textContent = "Invalid US number: " + userInput;
      }
    }

    function clearResults() {
      document.getElementById("results-div").textContent = "";
    }
9

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.