Download the PHP package involve-digital/phone-control without Composer
On this page you can find all versions of the php package involve-digital/phone-control. It is possible to download/install these versions without Composer. Possible dependencies are resolved automatically.
Download involve-digital/phone-control
More information about involve-digital/phone-control
Files in involve-digital/phone-control
Package phone-control
Short Description Extension for Nette forms adding phone input with "libphonenumber" library validation.
License LGPL-2.1 LGPL-3.0
Informations about the package phone-control
Phone control: final solution for validating phone numbers in Nette forms
Introduction
InvolveDigital brings you complete solution for phone numbers in Nette forms. Features include:
- validation via "giggsey/libphonenumber-for-php" library for backend and "libphonenumber-js" library for frontend
- freedom of phone number format on input
- unification of phone number format in output
- complete region codes solution
Installation
The recommended way to install is via Composer:
Minimal required PHP is 7.1 and Nette 2.4
Client-side support can be installed with npm or yarn:
Usage
Backend
Config
Register extension and configure in configuration files.
- in example you can see default configuration
- you don't have to configure, if you dont need anything different
Note: in older Nette use ::constant()
instead of constant()
Let's have number +420 608 343 634
number as an example.
Allowed values for outputFormat
field are:
Value | Logic | Output |
---|---|---|
libphonenumber\PhoneNumberFormat::E164 | PhoneNumberUtil::format() | +420608343634 |
libphonenumber\PhoneNumberFormat::INTERNATIONAL | PhoneNumberUtil::format() | +420 608 343 634 |
libphonenumber\PhoneNumberFormat::NATIONAL | PhoneNumberUtil::format() | 608 343 634 |
libphonenumber\PhoneNumberFormat::RFC3966 | PhoneNumberUtil::format() | tel:+420-608-343-634 |
Involve\Forms\Controls\PhoneControl::OUTPUT_FORMAT_GET_NATIONAL_NUMBER | PhoneNumber::getNationalNumber() | 608363903 |
Involve\Forms\Controls\PhoneControl::OUTPUT_FORMAT_RAW | --- | value as it was typed in |
Involve\Forms\Controls\PhoneControl::OUTPUT_FORMAT_PHONENUMBER_OBJECT | --- | libphonenumber\PhoneNumber object |
Nette form
Without client-side script
You can definitely use this extension server side only. The user will be forced to write region code though, so you might want to leave that information somewhere near the input.
Alternatively you can preset default region code. This component essentially adds two inputs into form; TextInput
for actual phone number and HiddenInput
for region code, mainly used by client side script. You could use the hidden input for setting default region code:
Frontend
True beauty comes with the client side script. Script is dependent on netteForms.js
library. Usage of libphonenumber-js
library is optional as you can write your own validation without this library.
How does it work?
- a dropdown is appended at the beginning of input
- dropdown contains specified countries/regions options
- on select, region code value is saved to hidden input
- on select of option "other", additional input for other region code is added
- on typed "+" sign in phone input, dropdown is hidden as it is pressumed, that user will enter region code number in main imput
Everything is written in vanilla JS.
Global object Nette
is updated and Nette.PhoneControl
object is created, where all functionality resides.
There are some options, that you can modify.
Config
Useful functions
You can validate control via PhoneControl.validateControl
function:
You can also write your own validation:
Input is validated autmatically when Nette.validateForm()
is called (e.g. on submit). If you don't want that for some reason, you can unset validator:
You might want to reinitialize phone control, espetially after snippet redrawal>
CSS
Current CSS is ready for Bootstrap framework, there is high probability, that you'll have to do some CSS adjustments in your projects for this component to work. You can also style the component from scratch.
Please see .css
and .scss
file, copy contents to your project and modify as needed.
Most important styles to be modified are:
All versions of phone-control with dependencies
nette/di Version >=2.4
nette/forms Version >=2.4
nette/utils Version >=2.4
giggsey/libphonenumber-for-php Version >=8.12.26