Notes

Notes on using libphonenumber-js for mobile phone number validation and formatting

Edit on GitHub

JavaScript
3 minutes

In the browser, you can use it as a script from the CDN

https://unpkg.com/libphonenumber-js@1.9.24/bundle/libphonenumber-mobile.js
https://unpkg.com/libphonenumber-js@1.9.24/metadata.min.json
https://unpkg.com/libphonenumber-js@1.9.24/examples.mobile.json

For detecting template of mobile numbers in national format (i.e. 0333 1234567 - with a 0 in the beginning), you’ll get xxxx xxxxxxx. It’ll give you a template for numbers in international format as well, you’ll get xxx xxx xxxxxxx

 1cont asYouType = new libphonenumber.AsYouType('PK')
 2
 3asYouType.input('+923331234567') // +92 333 1234567
 4asYouType.getTemplate() // xxx xxx xxxxxxx
 5
 6asYouType.input('03331234567') // 0333 1234567
 7asYouType.getTemplate() // xxxx xxxxxxx
 8
 9asYouType.input('3331234567') // 3331234567
10asYouType.getTemplate() // xxxxxxxxxx

Similarly, if you give it a phone number without any indication of what the country is, the validation will fail

1const asYouType = new libphonenumber.AsYouType('PK')
2
3console.log(asYouType.input('+923331234567')) // +92 333 1234567
4console.log(asYouType.getNumber().number) //  +923331234567
5console.log(asYouType.getChars()) // +923331234567
6console.log(asYouType.getTemplate()) // xxx xxx xxxxxxx
7console.log(asYouType.isValid()) // true

1// No country value in instantiation but country code in input = valid phone number
2const asYouType = new libphonenumber.AsYouType()
3
4console.log(asYouType.input('+923331234567')) // +92 333 1234567
5console.log(asYouType.getNumber().number) //  +923331234567
6console.log(asYouType.getChars()) // +923331234567
7console.log(asYouType.getTemplate()) // xxx xxx xxxxxxx
8console.log(asYouType.isValid()) // true

1// No country value in instantiation and no country code in input = invalid phone number
2const asYouType = new libphonenumber.AsYouType()
3
4console.log(asYouType.input('03331234567')) // 03331234567
5console.log(asYouType.getNumber().number) // Uncaught TypeError: Cannot read property 'number' of undefined
6console.log(asYouType.getChars()) // 03331234567
7console.log(asYouType.getTemplate()) // xxxxxxxxxxx
8console.log(asYouType.isValid()) // false

Since AsYouType is a class, you have to instantiate it with new

 1$('#phoneNumber').keyup(function (event) {
 2  // TODO: Make sure the event is only handled if a number key was pressed (and not the arrow or backspace key for example)
 3  // if (event.which != 8 && isNaN(String.fromCharCode(event.which))) {
 4  //   event.preventDefault() //stop character from entering input
 5  // }
 6
 7  let selectedCountry = 'PK'
 8  let asYouType = new libphonenumber.AsYouType(selectedCountry)
 9  let phoneNumber = $(this).val()
10  var formatted = asYouType.input(phoneNumber)
11
12  $(this).focus().val('').val(formatted)
13
14  console.log('input:', asYouType.input(formatted)) // '(213) 373-4253'
15  console.log('getNumber:', asYouType.getNumber().number) // '+12133734253'
16  console.log('getChars:', asYouType.getChars()) // '2133734253'
17  console.log('getTemplate:', asYouType.getTemplate()) // '(xxx) xxx-xxxx'
18  console.log('isValid:', asYouType.isValid()) // '(xxx) xxx-xxxx'
19
20  if (asYouType.isValid()) {
21    $('#phoneNumber').addClass('is-valid')
22  } else {
23    $('#phoneNumber').removeClass('is-valid')
24  }
25})

You can also parse a phone number and get it in the form of a proper object

 1try {
 2  let parsedPhoneNumber = libphonenumber.parsePhoneNumberWithError(phoneNumber, selectedCountry)
 3  console.log('parsedPhoneNumber:', parsedPhoneNumber, typeof parsedPhoneNumber)
 4} catch (error) {
 5  if (error instanceof libphonenumber.ParseError) {
 6    // Not a phone number, non-existent country, etc.
 7    console.log('Error parsing number:', error.message)
 8  } else {
 9    console.error('something went rogue while parsing phone number')
10    // throw error
11  }
12}

Because of the E.164 standard, i know that all phone numbers can only be 15 digits max

  • Country code (1 to 3 digits)
  • Subscriber number (max 12 digits)

This helps in setting minlength and maxlength attributes for the phone number input field

Browse all topics