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

JavaScript
1

Tell us what’s happening:

While my styling is not done, my logic is complete for this certification project. However, while I pass almost every single test, the very last one does not pass. The test is: 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. I thought this should be working especially since I passed all the other tests which were checking for this exact thing.

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <header>

    </header>
    <main>
      <input type="text" id="user-input">
      <button id="check-btn">Enter</button>
      <button id="clear-btn">Clear</button>
      <div id="results-div"></div>
    </main>
  </body>
  <script src="script.js"></script>
</html>


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

window.onload = () => {
  input.oninput = update;
  //input.addEventListener("input", update);
  submitBtn.addEventListener('click', isValid);
  clearBtn.addEventListener('click', clear);
}

const update = event => {
  const element = event.target;
  const value = element.value.replace(/[\s-\(\)]/g, "");
  //console.log(value);
  //console.log("check");
}

const clear = () => {
  results.textContent = "";
  //input.textContent = "";
}

const isValid = () => {
  //const validRegex = /^1\(\d{3}\)|^\(\d{3}\)|\d+$/g
  const cleaned = input.value.replace(/[^\d-\(\)]/g, "");
  console.log(cleaned);
  //leading1 ,space/dash, 3 digits either wrapped in para or not, space/dash, 3 digits, space/dash, 4 digits
  const validRegex = /^1?[\s-]?(\(\d{3}\)|\d{3})[\s-]?\d{3}[\s-]?\d{4}$/
  if(input.value.length <= 0) {
    alert("Please provide a phone number");
  }
  if (validRegex.test(cleaned)){
    console.log("valid");
    results.textContent = `Valid US number: ${input.value}`;
    return true;
  }else{
    console.log("invalid");
    results.textContent = `Invalid US number: ${input.value}`;
    return false;
  }
  /**const cleaned = input.value.replace(/[^\d-\(\)]/g, "");
  if(cleaned.length < 7){}
  switch(cleaned.length && validRegex.test(cleaned)) {
    case 10: 
      console.log("valid");
      results.textContent = `Valid US number: ${input.value}`;
      break;
    case 11:
      if(validRegex.test(input.value)){
        console.log("valid");
        results.textContent = `Valid US number: ${input.value}`;
      }else{
        console.log("invalid");
        results.textContent = `Invalid US number: ${input.value}`;
      }
      break;
    default:
      console.log("invalid");
      break;
  }
  console.log(cleaned);
  **/
}

//isValid();

/* file: styles.css */

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:137.0) Gecko/20100101 Firefox/137.0

Challenge Information:

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

1 Like
2

let’s do some debugging together

if you add console.log({valid: false, number: input.value}) and console.log({valid: true, number: input.value}) in your if/else and run the tests you see all the numbers being tested and how your code evaluates them

at the end, there would be { valid: true, number: '1!(068)397-8713' }
Do you think that is a valid number?

also not related to tests, but if you press Enter with an empty input, you get the alert and then Invalid US number: appear below, maybe you should stop the text from appearing

1 Like
3

I got it figured out, Thank you!