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

Tell us what’s happening:

Hello everyone, and happy new years. I hope everyone is doing well.
Long(ish) time coder, first time poster, so please excuse any formatting errors.
I’ve been working on this for a while now, and still have made 0 progress, I’ve rewritten the code multiple times, I have tried the Regex one-liner for this project, but have had no success with it, and reverted back to my original code, for it’s readability.
I don’t know what I am doing wrong, the code in theory SHOULD pass all the tests, but I can not even get it to throw an alert error catch for an empty input string, I’ve been working on this for days with many variations of the same lines of code, and made 0 progress. How many times do I have to rewrite it and still have it fail? is it the tester? variables? .innerHTML? I don’t know what I don’t know, and am looking for any tips, pointers, or advice. Thank you all for your time :slight_smile:

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">
  <title>Telephone Number Validator</title>
  <link rel="stylesheet" href="styles.css">
  <script src="script.js"></script>
</head>
<body>
  <h1>Telephone Number Validator</h1>
  <form>
    <input type="text" id="user-input">
    <button id="check-btn">Check</button>
    <button id="clear-btn">Clear</button>
  </form>
  <div id="results-div"></div>
</body>
</html>


/* file: styles.css */

/* file: script.js */
function telephoneCheck(str) {
  const num1 = /^\d{3}-\d{3}-\d{4}$/; // 555-555-5555
  const num2 = /^\(\d{3}\)\d{3}-\d{4}$/; // (555)555-5555
  const num3 = /^\(\d{3}\)\s{1}\d{3}-\d{4}$/; // (555) 555-5555
  const num4 = /^\d{3}\s{1}\d{3}\s{1}\d{4}$/; // 555 555 5555
  const num5 = /^\d{10}$/; // 5555555555
  const num6 = /^1{1}\s{1}\d{3}\s{1}\d{3}\s{1}\d{4}$/; // 1 555 55555555
  const num7 = /^1{1}\s{1}\(\d{3}\)\s{1}\d{3}-\d{4}$/; // 1 (555)555-5555
  const num8 = /^1{1}\(\d{3}\)\d{3}-\d{4}$/; // 1(555)555-5555
  const num9 = /^1{1}\s{1}\d{3}-\d{3}-\d{4}$/; // 1 555-555-5555
  const nums = [num1, num2, num3, num4, num5, num6, num7, num8, num9];
  let numIndex =0;
  while (numIndex < nums.length){
    if (nums[numIndex].test(str) === false){
      numIndex +=1;
    }
    else{
      return true;
    }
  }
  return false;
}

const form = document.querySelector('check-btn');

form.addEventListener('click', (event) => {
  event.preventDefault();

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

  if (userInput === '') {
    alert('Please provide a phone number');
  } else {
    const resultsDiv = document.getElementById('results-div');

    const isValid = telephoneCheck(userInput);

    if (isValid) {
      resultsDiv.innerHTML= 'Valid US number: ' + userInput;
    } else {
      resultsDiv.innerHTML= 'Invalid US number: ' + userInput;
    }
  }
});

const clearBtn = document.getElementById('clear-btn');

clearBtn.addEventListener('click', () => {
  resultsDiv.innerHTML = '';
});

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/116.0.0.0 Safari/537.36

Challenge Information:

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

1 Like

Explain in words what this is supposed to do.

Also, remember, you can’t run JS that depends on HTML element existing in the DOM before they actually exist in the DOM. When you put the script element in the head then it executes before the browser loads the remainder of the DOM below it. So if your JS depends on any of those element below the script tag then it isn’t going to work very well. You might want to move the script element to some place that will run the JS after all of the elements in the DOM are loaded.

2 Likes

Thank you for the quick reply! I originally had that has a .getElementbyId , after the nth variation and still failed tests I started trying new methods to select the ‘#check-btn’ , I didn’t even notice that remnant was still there, maybe that would fix it, I’ll reorganize my code and move the script to the end of my body, and change that back to a .getElementbyId and let you know if we can get a fix from that

1 Like

Wow, thank you so much! it worked! sorta, only one more test to pass:
When you click on the #clear-btn element, the content within the #results-div element should be removed.
I made more progress in the last 5 minutes from that tip than the last 2 days of struggling, I’ll just keep fiddling around with the code for the final test, and time for a new year, and a new project! Thanks again :slight_smile:

2 Likes

Evilusean, welcome to the freeCodeCamp community!
Your script element can work fine in the head if you use its async attribute (the defer attribute can work too).
The async attribute allows the HTML and JS to run at the same time.
Here’s an example of syntax for using the async attribute.
<script src="script.js" async></script>

1 Like

Good to know, I had no idea the placement mattered, or that async was even a thing

1 Like

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