This extension uses 2 libraries:
- A jQuery plugin for entering and validating international telephone numbers
- PHP version of Google's phone number handling library
Original demo can be found here - http://jackocnr.com/intl-tel-input.html.
The preferred way to install this extension is through composer.
Either run
$ php composer.phar require "borales/yii2-phone-input" "*"or add
"borales/yii2-phone-input": "*"
to the require section of your composer.json file.
Using as an ActiveField widget with the preferred countries on the top:
use borales\extensions\phoneInput\PhoneInput;
echo $form->field($model, 'phone_number')->widget(PhoneInput::className(), [
'jsOptions' => [
'preferredCountries' => ['no', 'pl', 'ua'],
]
]);Using as a simple widget with the limited countries list:
use borales\extensions\phoneInput\PhoneInput;
echo PhoneInput::widget([
'name' => 'phone_number',
'jsOptions' => [
'allowExtensions' => true,
'onlyCountries' => ['no', 'pl', 'ua'],
]
]);Using phone validator in a model (validates the correct country code and phone format):
namespace frontend\models;
use borales\extensions\phoneInput\PhoneInputValidator;
class Company extends Model
{
public $phone;
public function rules()
{
return [
[['phone'], 'string'],
[['phone'], PhoneInputValidator::className()],
];
}
}or if you need to validate phones of some countries:
namespace frontend\models;
use borales\extensions\phoneInput\PhoneInputValidator;
class Company extends Model
{
public $phone;
public function rules()
{
return [
[['phone'], 'string'],
// [['phone'], PhoneInputValidator::className(), 'region' => 'UA'],
[['phone'], PhoneInputValidator::className(), 'region' => ['PL', 'UA']],
];
}
}Using phone behavior in a model (auto-formats phone string to the required phone format):
namespace frontend\models;
use borales\extensions\phoneInput\PhoneInputBehavior;
class Company extends Model
{
public $phone;
public function behaviors()
{
return [
'phoneInput' => PhoneInputBehavior::className(),
];
}
}Note:
nationalModeoption is very important! In case if you want to manage phone numbers with country/operator code
- you have to set
nationalMode: falsein widget options (for example,PhoneInput::widget(...options, ['jsOptions' => ['nationalMode' => false]])).