How to Validate Phone Numbers Using JavaScript

Phone number validation is the process of checking if a given phone number matches a specific pattern. This ensures that the phone number entered is valid and formatted correctly. Whether it's for collecting contact information, sending verification codes, or setting up account recovery options, phone number validation makes sure that only accurate data is accepted.

It ensures that the information provided by users is correct and usable, preventing errors and reducing friction during the sign-up or registration process. JavaScript makes this easy to implement using a few lines of code.

In this article, we'll look at how to validate phone numbers using regular expressions (Regex) and other simple techniques.

Understanding Phone Number Formats

Before we start validating phone numbers, it's important to understand the various formats. A phone number can look different depending on the country or region. For example:

• US Phone Number: +1 123-456-7890
• UK Phone Number: +44 7911 123456
• Indian Phone Number: +91 99999 99999

While these numbers look different, they all represent valid phone numbers in their respective regions. Validation should ensure that the format matches the standards of the country where the user is located.

Using Regular Expressions for Validation

Regex is a pattern-matching syntax used to find specific patterns in text, such as phone numbers, emails, or passwords. It helps validate input data by checking if it matches a defined structure. To learn more about Regex visit this:- Regex Tutorial

For phone number validation, we'll use Regex to define patterns that match the common formats of phone numbers. By applying different patterns, we can validate phone numbers with or without special characters like parentheses, spaces, or hyphens. With the right Regex, we ensure that the phone number follows a correct and consistent format.

Implementing Validation in JavaScript

1.10 Digits Phone Number Validation: In many countries, phone numbers consist of 10 digits, excluding the country code. For this, the following code can be used:

function isValidPhoneNumber(phone) {
  const regex = /^\d{10}$/;
  return regex.test(phone);
}

// Example usage:
console.log(isValidPhoneNumber("1234567890")); // true
console.log(isValidPhoneNumber("123456789")); // false
console.log(isValidPhoneNumber("123456789a")); // false
console.log(isValidPhoneNumber("12345678901")); // false

2. In some countries like United States, phone numbers are typically formatted as "XXX-XXX-XXXX", excluding the country code. For this specific format, the following code can be used:

function isValidPhoneNumber(phone) {
  const regex = /^\d{3}-\d{3}-\d{4}$/;
  return regex.test(phone);
}

// Example usage:
console.log(isValidPhoneNumber("123-456-8901")); // true
console.log(isValidPhoneNumber("123-456-7890")); // true
console.log(isValidPhoneNumber("123-4567-890")); // false
console.log(isValidPhoneNumber("123-4567-890a")); // false
console.log(isValidPhoneNumber("12-4567-8901")); // false

3. In some cases, phone numbers may contain spaces or hyphens, but they should still be considered valid if they represent a 10-digit number after removing those characters. The following function checks for such conditions and ensures that the phone number is in a valid format:

function isValidPhoneNumber(phone) {
  if (!(!phone.includes("  ") && !phone.includes("--") && !phone.includes(" -") && !phone.includes("- "))) {
    return false;
  }
  // Check if phone contains hyphens or spaces
  if (/[\s-]/.test(phone)) {
    // Check if phone starts or ends with a space or hyphen
    if (/^[\s-]|[\s-]$/.test(phone)) {
      return false;
    }
  }
  // Normalize phone number: Remove spaces and hyphens
  phone = phone.replace(/[\s-]/g, '');
  // Check if phone number is exactly 10 digits
  const regex = /^\d{10}$/;
  return regex.test(phone);
}

// Example usage:
console.log(isValidPhoneNumber("1234567890")); // true
console.log(isValidPhoneNumber("123-456-7890")); // true
console.log(isValidPhoneNumber("123 456 7890")); // true
console.log(isValidPhoneNumber("-1234567890")); // false
console.log(isValidPhoneNumber("1234567890-")); // false
console.log(isValidPhoneNumber(" 1234567890")); // false
console.log(isValidPhoneNumber("1234567890 ")); // false
console.log(isValidPhoneNumber("123  4567890")); // false (double space)
console.log(isValidPhoneNumber("123--4567890")); // false (double hyphen)
console.log(isValidPhoneNumber("123 -4567890")); // false (space before hyphen)
console.log(isValidPhoneNumber("123- 4567890")); // false (space after hyphen)
console.log(isValidPhoneNumber("123456789")); // false (less than 10 digits)
console.log(isValidPhoneNumber("123456789a")); // false (non-digit character)

This function performs the following checks:

1. Normalization: It removes spaces and hyphens from the phone number.
2. Validation: It ensures the phone number is exactly 10 digits long by using the Regex pattern /^\d{10}$/.
3. Invalid Characters: It prevents errors if the phone number starts or ends with spaces or hyphens.

Conclusion

The functions provided can be seamlessly integrated with HTML forms that ask for phone numbers. By using them in your form validation, you can ensure that the user inputs are correctly formatted before submission. This prevents errors, improves the user experience, and helps you maintain clean and reliable data.

So, the next time you build a form or registration page, make sure to include phone number validation to keep your data accurate, and your users happy.