international-telephone-input-reactive
Reactive icon

International Telephone Input Reactive

Stable version 3.0.0 (Compatible with OutSystems 11)
Uploaded
 on 7 Jan
 by 
4.8
 (4 ratings)
international-telephone-input-reactive

International Telephone Input Reactive

Details
A JavaScript plugin for entering and validating international telephone numbers. It adds a flag dropdown to any input, displays a relevant placeholder and provides formatting/validation methods.
Read more

This asset is an Implementation of Jack O'Connor famous International Telephone Input plugin.

International Telephone Input is a plugin, written in pure JavaScript, for handling international telephone numbers. It makes it easy for your users to enter their phone number, and for you to validate it before saving it to your backend. Then, at a later time, you can display the number back to them in a format of your choice. All the while, giving you complete control with a variety of initialization options, public methods for interaction, and custom events you can listen for and react to.

By default, it adds a country dropdown to your input, and sets the placeholder to an example number for the selected country. Once the correct country is selected, the user is free to enter their number in whatever format they are used to, including the national format (e.g. no confusing international dial codes). The plugin then provides comprehensive validation tools, including returning error codes for invalid numbers, which you can then map to you own custom error messages. Finally, it returns the full standardized international number for you to save to your backend.

The country dropdown can be navigated by typing a country's name, or using the up/down arrow keys. You can control which countries appear in the list, as well as if any "preferred countries" should be displayed separately at the top. You can also provide localized country names if you wish. Full accessibility is provided via ARIA tags. Finally, the flag images can be completely disabled if needed, and you can replace the selected flag with a dial code instead.

Phone number validation and formatting are complex problems, when you think about supporting all the different types of numbers (mobile/landline/toll-free/premium etc) from hundreds of different countries, each with their own area codes etc. And these numbers are entered by users in different formats (national/international). And all of this is constantly changing as countries update what is allowed and add new rules. For this reason, this plugin uses a custom build of Google's libphonenumber library for all formatting, validation and generating placeholder numbers.

For more details see:

https://github.com/jackocnr/intl-tel-input

https://intl-tel-input.com/

If you find the plugin helpful, please consider supporting Jack's project.

Release notes (3.0.0)

Upgraded plugin from v18.2.1 to v25.2.1

New Features:

  • Added support for option CountrySearch
  • Added support for option FixDropdownWidth
  • Added support for option FormatAsYouType
    • IMP.: this may be a breaking change if you are not using GetNumber. If you are using the number directly from the input disable this option or start using GetNumber, as from my tests the input will not have the number when this option is enabled.
  • Added support for option StrictMode
  • Added support for method setDisabled
  • Added support for method setPlaceholderNumberType


Other Changes:

  • Removed support for option autoInsertDialCode - breaking change
  • Configuration structure attribute LocalizedCountry was renamed to I18n
  • Action IsValidNumber renamed to isValidNumberPrecise, and isPossibleNumber to isValidNumber


Tested with OutSystems UI Version 2.21.0

License (3.0.0)
Reviews (3)
by 
2022-09-07
in version 1.1.0
Great component! Contains all countries and all regex'es for valid phone numbers. Makes dealing with it a less pain in the ass.
by 
2021-08-07
in version 1.1.0
Awesome component, it's what I need. Thanks and congratulations! I just will add a JS to prevent letters.
by 
2021-07-16
in version 1.1.0
Very nice component. really useful.. I would only add a onKeyPress validation (as an optional) to avoid inputting wrong characters (like letters for instance)
Team
Other assets in this category