Projects

3/Business/post-list

Privacy policy

Home » »

 Write JavaScript code to check if a submitted value for phone number field is in a common format


Certainly! Here’s a simple example of JavaScript code that validates whether a submitted phone number is in a common 10-digit format:

<!DOCTYPE html>
<html>
<body>
  <form id="validationCheck" name="validationCheck" method="post">
    <label for="phoneNumber">Phone Number:</label>
    <input type="tel" id="phoneNumber" name="phoneNumber" onchange="validatePhoneNumber()">
    <button type="submit">Submit</button>
    <div id="phoneValidationMsg"></div>
  </form>

  <script>
    // Validate phone number
    function validatePhoneNumber() {
      // Get and trim phone number input
      const phoneNumber = document.getElementById('phoneNumber').value.trim();

      // Regex pattern for 10-digit phone number
      const pattern = /^\d{10}$/;

      // Validate phone number and update message
      const isValid = pattern.test(phoneNumber);
      document.getElementById('phoneValidationMsg').textContent = isValid
        ? ''
        : 'Please enter a valid 10-digit phone number.';

      // Return validation status
      return isValid;
    }

    // Listener for when the DOM is fully loaded
    document.addEventListener('DOMContentLoaded', function () {
      // Event listener for form submission
      document.getElementById('validationCheck').addEventListener('submit', function (event) {
        // Validate phone number; prevent submission if invalid
        if (!validatePhoneNumber()) {
          event.preventDefault(); // Stops form submission for invalid number
        }
      });
    });
  </script>
</body>
</html>

This code sets up an HTML form with an input field for the phone number. When the user enters a value and submits the form, the JavaScript function validatePhoneNumber() checks if the input matches the 10-digit format. If not, it displays an error message.