Number Validator

Code Feedback
1

I just finished my number validator and would like some feedback on my javascript.

Github
Preview

const input = document.getElementById("user-input");
const checkBtn = document.getElementById("check-btn");
const clearBtn = document.getElementById("clear-btn");
const output = document.getElementById("results-div");

const validRegexArr = [
  /^1\s\d{3}(-|\s)\d{3}(-|\s)\d{4}$/,
  /^1\s\(\d{3}\)\s\d{3}-\d{4}$/,
  /^1\s\d{3}\s\d{3}\s\d{4}$/,
  /^\d{10}$/,
  /^\d{3}-\d{3}-\d{4}$/,
  /^\(\d{3}\)\d{3}-\d{4}$/,
  /1\(\d{3}\)\d{3}-\d{4}$/,
];

function isValid(array, input) {
  for (const regex of array) {
    if (regex.test(input)) {
      return true;
    }
  }
  return false
}

function outputMsg(array, input) {
  if (input === "") {
    alert("Please provide a phone number");
    return;
  }
  if (isValid(array, input)) {
    return `Valid US number: ${input}`;
  } else {
    return `Invalid US number: ${input}`;
  }
}

input.addEventListener("change", () => {
  output.textContent = outputMsg(validRegexArr, input.value);
});

checkBtn.onclick = () => {
  output.textContent = outputMsg(validRegexArr, input.value);
};

clearBtn.onclick = () => {
  output.textContent = "";
  input.value = "";
};

If you have any feedback unrelated to javascript, please feel free to give those as well.

1 Like
2

Hi @Arlen

You could make the country code optional.

Regarding the display: how about the making it a little wider so the text does not wrap onto a new line?

image

Happy coding

3

*Made country code optional and reduced the amount of items in the array.
*Made the screen wider.

const validRegexArr = [
  /^(1\s)?\d{3}-\d{3}-\d{4}$/,
  /^(1\s)\(\d{3}\)\s\d{3}-\d{4}$/,
  /^1\(\d{3}\)\d{3}-\d{4}$/,
  /^1?\s\d{3}\s\d{3}\s\d{4}$/,
  /^\d{10}$/,
  /^\(\d{3}\)\d{3}-\d{4}$/,
];

Screenshot 2024-09-26 112438
Thank you.

1 Like