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

JavaScript
1

Please, give me any ideas💡

The tests are failed in 5 sections, including “The number 1 555 555 5555 should be recognised as a valid one”. Why 1 456 789 4444 is valid and the above number is not valid?

The thing is that the “regex.test” method returns true and I have two switched result messages for this number: Valid and Invalid.

Also my “mismatched” function doesn’t work and I don’t know why, I still can see the numbers with mismatched parenthesis like the valid numbers…

<!-- file: index.html -->
<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport", content="width=device-width, initial-scale=1.0">
    <meta charset="UTF-8">
    <link rel="stylesheet", href="styles.css">
  </head>
  <body>
    <div class="form-container">
    <label for="user-input">Enter a US phone number</label>
    <input type="tel" id="user-input" placeholder ="Type your number here...">
    <div id="button-container">
      <button type="button" id="check-btn">Check</button>
       <button type="button" id="clear-btn">Clear</button>
      </div>
        <div id="results-div"></div>
        </div>
    <script src="script.js"></script>
  </body>
</html>

/* file: script.js */
const userInput = document.getElementById("user-input");
const clearBtn = document.getElementById("clear-btn");
const checkBtn = document.getElementById("check-btn");
const result = document.getElementById("results-div");
const regex = /^1?\s?\(?[0-9]{3}\)?[-\s]?[0-9]{3}[-\s]?[0-9]{4}$/gi;
const mismatched = (depth, character) => {
  depth = 0;
 for (character in userInput) {
depth += character === '(';
depth -= character === ')';
if (depth < 0 ) {
break;
} else if (depth !== 0) {return false;}}
};

function checkInput () {
  if (userInput.value === "") {
  alert("Please provide a phone number");
  } else if (regex.test(userInput.value) && mismatched) {
    result.innerText = `Valid US number: ${userInput.value}`;
  } else {
    result.innerText = `Invalid US number: ${userInput.value}`;
  }
}

function clearInput () {
  result.innerText = "";
  userInput.value = "";
}

checkBtn.addEventListener("click", checkInput);
clearBtn.addEventListener("click", clearInput);


/* file: styles.css */

body {
  background-color:#ffe9e3;
  color: #7c73e6;
  font-size: 16;
  width: 100vw;
  height: 100vh;
}

label {
  margin: 1em auto 1em auto;
  padding: auto;
  text-align: center;
  text-shadow: 1px -1px #c4c1e0;
  font-size: 2em;
  display: block;
}

input, button {
  background-color: #c4c1e0;
  border: 1px solid #fafafa;
  font-size: 1.1em;
  border-radius: 5%;
  font-family: times;
}

input {
  display: block;
  padding: auto;
  width: 80%;
  margin: 1em auto;
  height: 15%;
  font-size: 1.2em;
}

#button-container {
  display: flex;
  justify-content: space-evenly;
  padding: auto;
  width: 80%;
  height: 10vh;
  margin: 1em auto;
}

.form-container {
  background-color: #fafafa;
  width: 90vw;
  height: 90vh;
  margin: auto;
  padding: 0;
}

button {
  width: 40%;
  height: 100%
}

#results-div {
  background: #ffede3;
  width: 70vw;
  height: 50vw;
  margin: auto;
  padding: auto;
  border-radius: 5%;
  font-size: 1.2em;
}

Your browser information:

User Agent is: Mozilla/5.0 (Linux; Android 10; K) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/126.0.0.0 Mobile Safari/537.36

Challenge Information:

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

2

do not use g flag with test method, you can research what happens when you do that if you want more infos

3

Thank you very much, that works :heart:
Now I have the problem only with mismatched function :slightly_smiling_face:

4

Please, help me with my mismatched function, why it doesn’t work?

5

what should your function do?

6

It should check if there any unpaired parentheses () in user input, but such inputs like 555)-555-5555 are still considered as valid by my validator, I can’t understand why

7

How does it check, what it should return when, etc? Please give more details, I have no idea what your function should do, or what you want it to do

8

You might want to reconsider whether you need a separate function to check for this. Regular expressions are very powerful. You might want to revisit this step, or this step.

1 Like
9 
const mismatched = (depth, character) => {
  depth = 0;
 for (character in userInput) {
depth += character === '(';
depth -= character === ')';
if (depth === 0 ) {
break;
} else if (depth !== 0) {return false;}}
};

(I have changed the function a little) This function should check userInput and add 1 to ‘depth’ if there is a ‘(’ , or subtract 1 from ‘depth’ if there is a ‘)’ .

Next, the mismatched function should check the value of depth. If it is equal to 0 it means that there are the same number of ‘(’ as ‘)’ . If it is less or more than 0 it means that there is an unpaired symbol ‘(’ or ‘)’. In this case the function should return false.

function checkInput () {
  if (userInput.value === "") {
  alert("Please provide a phone number");
  } else if (regex.test(userInput.value) && mismatched) {
    result.innerText = `Valid US number: ${userInput.value}`;
  } else {
    result.innerText = `Invalid US number: ${userInput.value}`;
  }
}

Next, the function checkInput checks the value of mismatched function and if it is not true, checkInput should result with “Invalid number” message

10

I really appreciate your help, the thing is that the regex mustn’t allow use ‘)’ without ‘(’ and vice versa…

11

how many characters do you want to check? that if/else with return inside the loop is suspicious

also, you never call the function, so there is no way for it to check anything

1 Like
12

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