Javascript phone number verification- eliminating error messages

Question

Javascript phone number verification- eliminating error messages

Objective:

To ensure that phone numbers are entered in the correct format (e.g. 208-111-1111) and display an error message if the format is incorrect. How can we make sure the error message disappears once the user re-enters the correct format?

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>

javascript dom

Answer 1

Answer №1

function checkPhoneNumber() {
  phoneNumber = document.getElementById("phone");
  var result = phoneNumber.value.match(/^(\d{3}-\d{3}-\d{4})?$/);
  if (result == null) {
    error2.innerHTML = "Invalid phone number format";
  } else {
    error2.innerHTML = "";
  };
}

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

Answer 2

function checkPhoneNumber() {
  phoneNumber = document.getElementById("phone");
  var result = phoneNumber.value.match(/^(\d{3}-\d{3}-\d{4})?$/);
  if (result == null) {
    error2.innerHTML = "Invalid phone number format";
  } else {
    error2.innerHTML = "";
  };
}

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

Answer 3

Answer №2

An issue arises when using the phoneNumber.toString() method.

The function of toString() on a DOM input element does not fetch the user input value. Its purpose is to generate a string representation of the object it operates on, rather than fetching a stored value from the object.

To obtain the desired value, use phoneNumber.value instead.

Answer 4

An issue arises when using the phoneNumber.toString() method.

The function of toString() on a DOM input element does not fetch the user input value. Its purpose is to generate a string representation of the object it operates on, rather than fetching a stored value from the object.

To obtain the desired value, use phoneNumber.value instead.

Javascript phone number verification- eliminating error messages

Answer №1

Answer №2

Similar questions

Combining server-side and client-side routing in AngularJS: A comprehensive guide

Is your custom shader material experiencing a lengthy initialization process?

Repeater in ASP controls the unique identification generation process

The 'ReactType' type is not generic within material-ui@next

What causes useEffect to be triggered multiple times, even when it is dependent on another useEffect function that is being executed repeatedly?

Set a class for the element created with document.createElement('img') method

Tips on appending a parameter to an image URL using JavaScript

Utilizing only JavaScript to parse JSON data

Where should JSON data be sourced from when developing a service in AngularJS?

When the Button is clicked, the component utilizing the Router fails to appear

What is the simplest way to run a basic express js script?

What is the method for incorporating a counter variable into a variable's name?

Connecting actions and reducers through promises in React

How can I use express.js to run a function upon receiving an HTTP request?

Fill in the text boxes using an AJAX request

Use Entity Objects instead of Strings in your Ajax requests for improved data handling

Is there a way to maintain the selected position on the drop-down menu for users?

AngularJS and numerous parallel indexed tables side by side

Introduce a timeout in the ajax request

Adding a cell break line within AG-GRID in an Angular application