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

JavaScript
1

Tell us what’s happening:

I’m almost finished. I just need a way to specify that you have to have both parentheses if you have any, you can’t just have one. You either have both or none.

Your code so far

<!-- file: index.html -->
<html>
<head></head>
<body>
<input id="user-input"></input>
<button id="check-btn">Check</button>
<button id="clear-btn">Clear</button>
<div id="results-div"></div>
<script src="script.js"></script>
</body>
</html>

/* file: script.js */
const input = document.getElementById("user-input");
const checkBtn = document.getElementById("check-btn");
const clearBtn = document.getElementById("clear-btn");
const result = document.getElementById("results-div");
const regex = /^1?\s?[(]?[2-9][0-9][0-9][)]?-?\s?[2-9][0-9][0-9]-?\s?[0-9][0-9][0-9][0-9]$/g;

const check = () => {
  if (input.value === "") {
  alert("Please provide a phone number");
} else if (input.value.match(regex)) {
  result.innerText = "Valid US number: " + input.value;
} else {
  result.innerText = "Invalid US number: " + input.value;
}
}

const clear = () => {
  result.innerText = "";
}

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

/* file: styles.css */

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.3 Safari/605.1.15

Challenge Information:

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

2

You can use a character group to say with parenthesis | without

1 Like