How to integrate international phone number validation in input Field with javascript ?

One way to validate international phone numbers in a JavaScript input field is to use a regular expression to check for the correct format. For example, you could use the following regular expression to check for a valid international phone number:

/^(\+[1-9]{1}[0-9]{3,14})?([0-9]{9,14})$/

This regular expression allows for an optional "+" sign followed by the country code, and then the phone number. The country code can have between 1 and 15 digits, while the phone number can have between 9 and 14 digits.

You can then use the test() method to check if the input value matches the regular expression. For example:

const phoneNumber = document.getElementById("phone-number").value;
const phoneNumberRegex = /^(\+[1-9]{1}[0-9]{3,14})?([0-9]{9,14})$/;

if (!phoneNumberRegex.test(phoneNumber)) {
  alert("Invalid phone number");
}

You could also use an external library like libphonenumber-js for more robust validation by passing the number, and country code, it will give you the validation, parsed phone number and formatted phone number.

import { parsePhoneNumberFromString } from 'libphonenumber-js';

const phoneNumber = document.getElementById("phone-number").value;
const parsedNumber = parsePhoneNumberFromString(phoneNumber, 'US');

if (!parsedNumber.isValid()) {
  alert("Invalid phone number");
}

Please note that these are just examples and you should adjust the regular expression and validation logic to fit your specific requirements.

There is another method to do this integration :

There are a few different ways to validate international phone numbers in JavaScript, depending on your specific use case and the level of complexity you're looking for. Here's one example of a simple way to validate an international phone number in an input field using JavaScript:

// Function to validate international phone number
function validatePhoneNumber(phoneNumber) {
  // Regular expression to match most international phone number formats
  var phoneNumberRegex = /^\+(?:[0-9] ?){6,14}[0-9]$/;
  // Test the phone number against the regular expression
  if (phoneNumberRegex.test(phoneNumber)) {
    // Phone number is valid
    return true;
  } else {
    // Phone number is not valid
    return false;
  }
}

// Get the phone number input field
var phoneNumberInput = document.getElementById("phone-number");

// Add an event listener to the input field to validate the phone number when the user submits the form
phoneNumberInput.addEventListener("blur", function() {
  // Get the value of the phone number input field
  var phoneNumber = phoneNumberInput.value;
  // Validate the phone number
  if (!validatePhoneNumber(phoneNumber)) {
    // If the phone number is not valid, display an error message
    alert("Invalid phone number");
  }
});

This example uses a regular expression to match most international phone number formats, and then tests the input field’s value against that regular expression when the user submits the form. If the phone number does not match the regular expression, an error message is displayed.

This is just one example of how to validate international phone numbers in JavaScript, and there are many other libraries and plugins available that can help you with this task, like google-libphonenumber