PHPackages                             involve-digital/phone-control - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Validation & Sanitization](/categories/validation)
4. /
5. involve-digital/phone-control

ActiveLibrary[Validation & Sanitization](/categories/validation)

involve-digital/phone-control
=============================

Extension for Nette forms adding phone input with "libphonenumber" library validation.

v1.0.0(4y ago)01.4k—0%LGPL-2.1PHPPHP >=7.1.0

Since Feb 5Pushed 4y ago1 watchersCompare

[ Source](https://github.com/Involve-Digital/phone-control)[ Packagist](https://packagist.org/packages/involve-digital/phone-control)[ RSS](/packages/involve-digital-phone-control/feed)WikiDiscussions main Synced 1mo ago

READMEChangelog (8)Dependencies (5)Versions (7)Used By (0)

Phone control: final solution for validating phone numbers in Nette forms
=========================================================================

[](#phone-control-final-solution-for-validating-phone-numbers-in-nette-forms)

Introduction
------------

[](#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
------------

[](#installation)

The recommended way to install is via Composer:

```
composer require involve-digital/phone-control

```

Minimal required PHP is 7.1 and Nette 2.4

Client-side support can be installed with npm or yarn:

```
npm install phone-control

```

Usage
-----

[](#usage)

### Backend

[](#backend)

#### Config

[](#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

```
extensions:
        forms.phoneControl: Involve\Forms\Controls\PhoneControl\DI\PhoneControlExtension

forms.phoneControl:
    allowedRegions: [] # only allowed regions
    expectedRegions: [CZ, SK] # regions that we expect will be typed, but other regions are not restricted
    outputFormat: constant(libphonenumber\PhoneNumberFormat::E164) # output format
    outputFormatWhitespaces: true # set to false, if you want to trim whitespaces in output phone number
    regex: constant(Involve\Forms\Controls\PhoneControl::DEFAULT_REGEX) # first degree of protection, you can specify your own regex here
```

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:

ValueLogicOutputlibphonenumber\\PhoneNumberFormat::E164PhoneNumberUtil::format()+420608343634libphonenumber\\PhoneNumberFormat::INTERNATIONALPhoneNumberUtil::format()+420 608 343 634libphonenumber\\PhoneNumberFormat::NATIONALPhoneNumberUtil::format()608 343 634libphonenumber\\PhoneNumberFormat::RFC3966PhoneNumberUtil::format()tel:+420-608-343-634Involve\\Forms\\Controls\\PhoneControl::OUTPUT\_FORMAT\_GET\_NATIONAL\_NUMBERPhoneNumber::getNationalNumber()608363903Involve\\Forms\\Controls\\PhoneControl::OUTPUT\_FORMAT\_RAW---value as it was typed inInvolve\\Forms\\Controls\\PhoneControl::OUTPUT\_FORMAT\_PHONENUMBER\_OBJECT---libphonenumber\\PhoneNumber object#### Nette form

[](#nette-form)

```
$form->addPhone('phone', 'Phone:')
    ->setAllowedRegions('CZ');
//  ->setExpectedRegions(string|array $expectedRegions)
//  ->setOutputFormat(int $outputFormat) - see table above
//  ->setOutputFormatWhitespaces(bool $whitespaces)
```

#### Without client-side script

[](#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:

```
$form->addPhone('phone', 'Phone:')
    ->setAllowedRegions('CZ');

$form['phoneRegionCode']->setValue('+420'); // hidden input is created by adding postfix "RegionCode" to the name of the parent input
```

### Frontend

[](#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?

1. a dropdown is appended at the beginning of input
2. dropdown contains specified countries/regions options
3. on select, region code value is saved to hidden input
4. on select of option "other", additional input for other region code is added
5. 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

[](#config-1)

```

    Nette.PhoneControl.options = {
        'flag': true, // shows country flags in dropdown
        'otherText': '-jiné-', // you might want to pass translated text here
        'singleOptionPaddingOffset': 15, // padding-left of input that dropdown is in
        'multiOptionsPaddingOffset': 20, // padding-left of input that dropdown is in
        'dropdownChevronTopOffset': 8 // top offset of dropdown chevron icon
    };

```

#### Useful functions

[](#useful-functions)

You can validate control via `PhoneControl.validateControl` function:

```
var valid = Nette.PhoneControl.validateControl(
  document.getElementById('test-phone-control')
);
```

You can also write your own validation:

```
Nette.PhoneControl.validateControl = function (phoneControl) {
    //... your 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:

```
delete Nette.validators['InvolveFormsControlsPhoneControl_validateNumber'];
```

You might want to reinitialize phone control, espetially after snippet redrawal>

```
$.nette.ajax({
  url: '...',
  complete: function () {
    Nette.PhoneControl.initControl(
      document.getElementById('test-phone-control')
    );
  }
});
```

#### CSS

[](#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:

```
/* positioning of dropdown in input */
.phone-control-region-code {
    margin-top: 8px !important;
    margin-left: 10px !important;
}

/* hover over dropdown options */
.phone-control-region-code li:not(:first-child):hover {
    background-color: rgb(184, 233, 134) !important;
    color: white;
}

/* input for other region code */
.phone-control-region-code li.phone-control-selected input[type="tel"] {
    height: 16px !important;
    width: 30px !important;
}
```

###  Health Score

26

—

LowBetter than 43% of packages

Maintenance20

Infrequent updates — may be unmaintained

Popularity18

Limited adoption so far

Community9

Small or concentrated contributor base

Maturity48

Maturing project, gaining track record

 Bus Factor1

Top contributor holds 100% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Every ~1 days

Total

6

Last Release

1556d ago

Major Versions

v0.1.8 → v1.0.02022-02-12

PHP version history (2 changes)v0.1.2PHP >=7.2.0

v0.1.8PHP >=7.1.0

### Community

Maintainers

![](https://www.gravatar.com/avatar/0f39e259d02db301423292232c2f6fb5255c2cb51d4b22a0751ff0e06dc5dc5a?d=identicon)[Blazik](/maintainers/Blazik)

![](https://www.gravatar.com/avatar/92a44411979d6cf2733ccd9ef4ad0967dbca104f5c385b5e25d6f1ebae4df3d1?d=identicon)[ondrej-tolg](/maintainers/ondrej-tolg)

![](https://www.gravatar.com/avatar/c3e92ceb590cda9d2bdabe9d533a9460b8c9be27260cd3e5297f1b486b935035?d=identicon)[hantc](/maintainers/hantc)

---

Top Contributors

[![ondrej-tolg](https://avatars.githubusercontent.com/u/67058044?v=4)](https://github.com/ondrej-tolg "ondrej-tolg (5 commits)")

### Embed Badge

![Health badge](/badges/involve-digital-phone-control/health.svg)

```
[![Health](https://phpackages.com/badges/involve-digital-phone-control/health.svg)](https://phpackages.com/packages/involve-digital-phone-control)
```

###  Alternatives

[nette/schema

📐 Nette Schema: validating data structures against a given Schema.

1.0k336.4M125](/packages/nette-schema)[nette/forms

📝 Nette Forms: generating, validating and processing secure forms in PHP. Handy API, fully customizable, server & client side validation and mature design.

54013.2M450](/packages/nette-forms)[ronanguilloux/isocodes

PHP library - Validators for standards from ISO, International Finance, Public Administrations, GS1, Book and Music Industries, Phone numbers & Zipcodes for many countries

8013.3M23](/packages/ronanguilloux-isocodes)[borales/yii2-phone-input

Yii2 International telephone numbers - Asset Bundle, Behavior, Validator, Widget

1341.6M6](/packages/borales-yii2-phone-input)[uestla/recaptcha-control

reCAPTCHA control for Nette Framework forms

26572.0k1](/packages/uestla-recaptcha-control)[nasext/dependent-select-box

Dependent Select Box for Nette Framework.

21262.8k2](/packages/nasext-dependent-select-box)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)