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

igorgetmeabrain · July 31, 2025, 9:10am

An event listener needs a callback function, which is invoked when the event occurs.
For instance, if you want to invoke the check function, you will need to explicitly call it at some point in your code. You can define as many functions as you like, but if you never call them, they serve no purpose.

MORE INFO:

zm17jaga · August 1, 2025, 9:58pm

Still not working.

 const checkBtn= document.getElementById("check-btn")
 checkBtn.addEventListener("click",check)
  const clearBtn=document.getElementById("clear-btn");
  clearBtn.addEventListener("click",clear);
 const input=document.getElementById("user-input");
 
 const resultsDiv=document.getElementById("results-div") 

function validity(){const allSame=/^(\d)\1+$/;
const digitsOnly=input.replace(/\D/g,'')
 
  
  
  if(digitsOnly.startsWith("1")===true){return true;
  check(digitsOnly);}
  if(digitsOnly.length===10&&allSame.test(digitsOnly)===false){return true;
  check(digitsOnly);}
 if (digitsOnly.value.length===11 && digitsOnly.value.startsWith("2")===false && input.value.startsWith("-")===false){return true;
 check(digitsOnly.value);};
  
 

function validity(){const allSame=/^(\d)\1+$/;

 
 const input=document.getElementById("user-input");
 const digitsOnly=input.replace(/\D/g,'')
 const resultsDiv=document.getElementById("results-div") 
  const clearBtn=document.getElementById("clear-btn");
  clearBtn.addEventListener("click",clear);
  
  if(digitsOnly.value.startsWith("1")===true){return true;
  check(digitsOnly.value);}
  if(digitsOnly.length===10&&allSame(digitsOnly).test()===false){return true;
  check(digitsOnly);}
 if (digitsOnly.length===11 && digitsOnly.startsWith("2")===false&&input.value.startsWith("-")===false){return true;
 check(input);}
  else{return false;check(input);}
}}








function check(){console.log(validity);
console.log(input.value)
  if(validity()===true&&checkBtn("click"))  resultsDiv.textContent= `"Valid US number:${input.value}"`;
else  resultsDiv.textContent=`Invalid US number:${input.value}`;

}
function clear(){if (clearBtn("click")){resultsDiv.textContent="";
input=""; 
}

}})```

Teller · August 1, 2025, 11:31pm

Hi @zm17jaga

There is a message in the console.
Also, the red squiggly lines in the editor indicate a syntax error.

Happy coding

zm17jaga · August 4, 2025, 9:34pm

Still not working:

 const checkBtn= document.getElementById("check-btn")
 checkBtn.addEventListener("click",check)
  const clearBtn=document.getElementById("clear-btn");
  clearBtn.addEventListener("click",clear);
 const input=document.getElementById("user-input");
 
 const resultsDiv=document.getElementById("results-div") 

function validity(){const allSame=/^(\d)\1+$/;
const digitsOnly=input.replace(/\D/g,'')
 
  
  
  if(digitsOnly.startsWith("1")===true){return true;
  check(digitsOnly);}
  if(digitsOnly.length===10&&allSame.test(digitsOnly)===false){return true;
  check(digitsOnly);}
 if (digitsOnly.value.length===11 && digitsOnly.value.startsWith("2")===false && input.value.startsWith("-")===false){return true;
 check(digitsOnly.value);};
  
 

function validity(){const allSame=/^(\d)\1+$/;

 
 const input=document.getElementById("user-input");
 const digitsOnly=input.replace(/\D/g,'')
 const resultsDiv=document.getElementById("results-div") 
  const clearBtn=document.getElementById("clear-btn");
  clearBtn.addEventListener("click",clear);
  
  if(digitsOnly.value.startsWith("1")===true){return true;
  check(digitsOnly.value);}
  if(digitsOnly.length===10&&allSame(digitsOnly).test()===false){return true;
  check(digitsOnly);}
 if (digitsOnly.length===11 && digitsOnly.startsWith("2")===false&&input.value.startsWith("-")===false){return true;
 check(input);}
  else{return false;check(input);}
}}








function check(){console.log(validity);
console.log(input.value)
  if(validity()===true&&checkBtn("click"))  resultsDiv.textContent= `"Valid US number:${input.value}"`;
else  resultsDiv.textContent=`Invalid US number:${input.value}`;

}
function clear(){if (clearBtn("click")){resultsDiv.textContent="";
input=""; 
}

}})```

pkdvalis · August 4, 2025, 10:48pm

Here are some troubleshooting steps you can follow. Focus on one test at a time:

What is the requirement of the first failing test?
Check the related User Story and ensure it’s followed precisely.
What line of code is involved?
What is the result of the code and does it match the requirement? You can write the value of a variable to the console at that point in the code to check if needed.
Are there any errors or messages in the console to follow up on?

If this does not help you solve the problem, please reply with answers to these questions.

pkdvalis · August 4, 2025, 10:49pm

You need to work on your formatting if you want to discuss code with other people.

Wouldyouwanttotalkwithsomeoneonlineiftheytyp
edeverythinglikethis?Itsnoteasytoreadeitherforyo
uorthepersonreadingitsoitmakesitmoredifficultt
ohelpyou

If the above code was formatted correctly you might have caught the error already.

zm17jaga · August 11, 2025, 8:42pm

How about now:

const checkBtn= document.getElementById("check-btn");

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

 const input=document.getElementById("user-input");
 
 const resultsDiv=document.getElementById("results-div") 

 function isValidPhone(number){const regex=/^(1\s?)?(\(\d{3}\)|\d{3})([\s\-]?)\d{3}([\s\-]?)\d{4}$/
 return regex.test(number)}


 






function validity(){const allSame=/^(\d)\1+$/;

 
 
 const digitsOnly=input.replace(/\D/g,'')
 
  
  
if(allSame.test(digitsOnly)){return false}
if(digitsOnly.length===10)
{return true;
  }




 if (digitsOnly.length===11 && digitsOnly.startsWith("1"))
 
 
 {return true;
 check(input);}


  else{return false;check(input);}
}



function check(){




  
  const rawValue=input.value.trim();


  if(!rawValue){alert("Please provide a phone number");
  return;}


  if(isValidPhone(rawValue)&&validity())
  
  {resultsDiv.textContent=`Valid US number:`}

  else  resultsDiv.textContent=`Invalid US number:${input.value}`;

 

}




function clear(){resultsDiv.textContent="";
input.value=""; 


}checkBtn.addEventListener("click",check);
  clearBtn.addEventListener("click",clear);

ILM · August 11, 2025, 8:43pm

that also does not look like conventional formatting

I’ve edited your post to improve the readability of the code. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

pkdvalis · August 11, 2025, 9:51pm

Here are some troubleshooting steps you can follow. Focus on one test at a time:

What is the requirement of the first failing test?
Check the related User Story and ensure it’s followed precisely.
What line of code implements this?
What is the result of the code and does it match the requirement? (Write the value of a variable to the console at that point in the code if needed.)
Are there any errors or messages in the console?

If this does not help you solve the problem, please reply with answers to these questions.

zm17jaga · August 12, 2025, 7:56pm

1: 7. 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"

.

2:It appears to be.I need to know what is wrong.
3: function validity(){const allSame=/^(\d)\1+$/;

const digitsOnly=input.value.replace(/\D/g,‘’)

if(allSame.test(digitsOnly)){return false}
if(digitsOnly.length===10)
{return true;
}

if (digitsOnly.length===11 && digitsOnly.startsWith(“1”))

{return true;
}

else{return false;}
}

function check(){

const rawValue=input.value.trim();

if(!rawValue){alert(“Please provide a phone number”);
return;}

if(isValidPhone(rawValue)&&validity())

{resultsDiv.textContent=Valid US number:${input.value}}

else resultsDiv.textContent=Invalid US number:${input.value};

}
4: I hadn’t thought of that but it says false no matter what I do to the code
5: no

pkdvalis · August 12, 2025, 8:07pm

Can you make an effort to format this in a way that’s easier to read?

zm17jaga · August 13, 2025, 11:19pm




const allSame=/^(\d)\1+$/;

const digitsOnly=input.value.replace(/\D/g,‘’)

if(allSame.test(digitsOnly)){return false}


if(digitsOnly.length===10)


{return true;}

if (digitsOnly.length===11 && digitsOnly.startsWith(“1”))

{return true;
}

else{return false;}
}

{

const rawValue=input.value.trim();

if(!rawValue)

{alert(“Please provide a phone number”);
return;}

if(isValidPhone(rawValue)&&validity())

{resultsDiv.textContent=`Valid US number:${input.value}`}

else resultsDiv.textContent=`Invalid US number:${input.value}`
}```

pkdvalis · August 14, 2025, 12:03am

Some of your code isn’t showing. You need to hit “enter” after the three backticks at the beginning, they need to be on separate line.

Likewise, you need to hit “enter” before the backticks on the last line, the backticks need to be on a new line.

```
Like this
code goes here
```

zm17jaga · August 14, 2025, 8:26pm


function validity(){const allSame=/^(\d)\1+$/;

const digitsOnly=input.value.replace(/\D/g,‘’)

if(allSame.test(digitsOnly)){return false}
if(digitsOnly.length===10)
{return true;
}

if (digitsOnly.length===11 && digitsOnly.startsWith(“1”))

{return true;
}

else{return false;}
}

function check(){

const rawValue=input.value.trim();

if(!rawValue){alert(“Please provide a phone number”);
return;}

if(isValidPhone(rawValue)&&validity())

{resultsDiv.textContent=`Valid US number:${input.value}`}

else resultsDiv.textContent=`Invalid US number:${input.value}`;

pkdvalis · August 14, 2025, 9:21pm

This is perfect thanks.

Here are some troubleshooting steps you can follow. Focus on one test at a time:

What is the requirement of the first failing test?
Check the related User Story and ensure it’s followed precisely.
What line of code implements this?
What is the result of the code and does it match the requirement? (Write the value of a variable to the console at that point in the code if needed.)
Are there any errors or messages in the console?

If this does not help you solve the problem, please reply with answers to these questions.

zm17jaga · August 16, 2025, 7:45pm

Answers are the same as above.

pkdvalis · August 16, 2025, 8:59pm

Can you make an effort to format this in a way that’s easier to read?

pkdvalis · August 16, 2025, 9:04pm

If I copy your code I get an error in the console.

SyntaxError: unknown: Unexpected character '‘'. (3:43)

  1 | function validity(){const allSame=/^(\d)\1+$/;
  2 |
> 3 | const digitsOnly=input.value.replace(/\D/g,‘’)
    |                                            ^
  4 |
  5 | if(allSame.test(digitsOnly)){return false}
  6 | if(digitsOnly.length===10)

Maybe you need to share your full code again. It looks like the quotes got mangled when you pasted into the forum. Don’t copy your forum code above copy it from your editor again.

if(isValidPhone(rawValue)&&validity())

{resultsDiv.textContent=`Valid US number:${input.value}`}

else resultsDiv.textContent=`Invalid US number:${input.value}`;

Can you format everything in a standard way? That would also be a good place to start.

zm17jaga · August 18, 2025, 7:47pm



const checkBtn= document.getElementById("check-btn");

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

 const input=document.getElementById("user-input");
 
 const resultsDiv=document.getElementById("results-div") 

 function isValidPhone(number){const regex=/^(1\s?)?(\(\d{3}\)|\d{3})([\s\-]?)\d{3}([\s\-]?)\d{4}$/
 return regex.test(number)}


 






function validity(){const allSame=/^(\d)\1+$/;

 
 
 const digitsOnly=input.value.replace(/\D/g,'')
 
  
  
if(allSame.test(digitsOnly)){return false}
if(digitsOnly.length===10)
{return true;
  }




 if (digitsOnly.length===11 && digitsOnly.startsWith("1"))
 
 
 {return true;
 }


  else{return false;}
}



function check(){




  
  const rawValue=input.value.trim();


  if(!rawValue){alert("Please provide a phone number");
  return;}


  if(isValidPhone(rawValue)&&validity(rawValue))
  
  {resultsDiv.textContent=`Valid US number:${input.value}`}

  else  resultsDiv.textContent=`Invalid US number:${input.value}`;

 

}




function clear(){resultsDiv.textContent="";
input.value=""; 


}checkBtn.addEventListener("click",check);
  clearBtn.addEventListener("click",clear);

Teller · August 18, 2025, 8:55pm

Hi @zm17jaga

Please check the console.

Uncaught TypeError: Cannot read properties of null (reading ‘addEventListener’)

Also post your html code.

Happy coding

Topic		Replies	Views
Help with Telephone Number Validator JavaScript	5	2431	February 2, 2021
Help with Validate US Telephone Numbers JavaScript	2	878	January 18, 2021
Build a Telephone Number Validator Project - Build a Telephone Number Validator JavaScript	3	180	August 19, 2024
Build a Telephone Number Validator Project - Build a Telephone Number Validator JavaScript	2	50	January 8, 2025
Build a Telephone Number Validator Project - Build a Telephone Number Validator JavaScript	10	275	October 17, 2024

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

Related topics