Проверка номера телефона Javascript - сообщение об ошибке

Question

Цель:

Номер телефона должен быть введен в этом формате, 208-111-1111;в противном случае отображается сообщение об ошибке.Как лучше всего показать сообщение об ошибке, когда пользователь ввел правильный формат, но если пользователь повторно ввел правильный формат, сообщение об ошибке исчезнет.

JS
phoneNumber = document.getElementById("phone");


var result = phoneNumber.toString().match(/^\d{3}-\d{3}-\d{4}$/);

function validatePhone(){
if (result == null)
{
error2.innerHTML = "The number is not in a correct format";
} else 
{
error2.innerHTML = " ";
};
}

HTML
<p>Phone:</p> 
      <input type = "text" id="phone" name="phone" onChange="validatePhone()">
      <br>
      <span id="error2" ></span>

Answer 1

Проблема с вызовом phoneNumber.toString().

Вызов toString() для элемента ввода DOM не возвращает значение пользовательского ввода.toString() предназначен для предоставления строкового представления вызываемого объекта, а не для извлечения значения, удерживаемого объектом.

phoneNumber.value вернет искомое значение.

Answer 2

function validatePhone() {
  phoneNumber = document.getElementById("phone");
  var result = phoneNumber.value.match(/^(\d{3}-\d{3}-\d{4})?$/);
  if (result == null) {
    error2.innerHTML = "The number is not in a correct format";
  } else {
    error2.innerHTML = " ";
  };
}

<p>Phone:</p>
<input type="text" id="phone" name="phone" oninput="validatePhone()">
<br>
<span id="error2"></span>