Готовые решения для 1С-Битрикс
Карточка решения
База знаний по решению:
Маска ввода номера телефона с выбором страны

Все часто задаваемые вопросы по решению: Маска ввода номера телефона с выбором страны

Селекторы для тиражных решений

В этой заметке будут публиковаться селекторы для типовых решений

Аспро Макс / Аспро Некст:
Основной вариант: #bx-soa-order input[autocomplete=tel][type=tel]
Альтернативный вариант (если основной не подошел): #soa-property-3, #soa-property-14

Аспро Лайт Шоп:
input.phone, input[autocomplete=tel][type=tel], #input_PERSONAL_PHONE

Отключить стандартную маску в решениях Аспро можно в настройках аспро в админке, обнулив поля настройки "Маска ввода телефона" и "Валидация ввода телефона"

Форматирование номера телефона попадающего в админку

Достаточно частые вопросы от пользователей связанные с форматированием:

1. В каком формате номер телефона попадает в админку?

Ответ: номер телефона отправляется так как его видит пользователь при вводе, с элементами маски. Если пользователь по маске ввел +7 (999) 999-99-99 то и в админку он сохранится в точно таком же формате +7 (999) 999-99-99 (при условии отсутствия доп. обработок разумеется)


2. Как поменять форматирование номера телефона сохраняющегося в админку?

Ответ: решение устанавливает маску на уровне поля ввода (ограничивая именно ввод, а не обработку), на обработку данных после отправки формы решение никак не влияет. Если мы с помощью решения установим маску +7 (999) 999-99-99, пользователь заполнит данные и на сервер они уйдут точно в таком же форматировании, например: +7 (123) 456-78-99
 
На уровне решения или маски на это не повлиять. Дальнейшее переформатирование сохраняемого номера (если это требуется конечно) можно делать на уровне обработки запроса на сохранение. 


3. Как менять форматирование номеров при сохранении?

Влиять на форматирование номеров телефонов на сохранении можно без доработки решения, используя стандартные события битрикса не связанные с решением. Единого решения или функции тут быть не может, т.к. обработку нужно добавлять в зависимости от того в какую сущность сохраняется номер телефона.

- Форматирование номера телефона попадающего в заказ

У битрикса есть стандартное форматирование номеров телефонов в заказах - что бы оно применялось нужно в свойстве заказа указать что оно является номером телефона. Сделать это можно в Админка -> Магазин -> Настройки -> Свойства заказа -> Список свойств. Открываем нужное свойство и устанавливаем у него галочку "Является телефоном". После установки данной опции у новых заказов данные в поле номера телефона будут очищаться от символов и букв, оставляя только цифры. Тоесть телефон будет сохраняться в админку в формате 71234567899

Если вам нужно более сложное нестандартное форматирование то делать его можно с помощью обработчика OnSaleOrderBeforeSaved


- Форматирование телефона при регистрации пользователя

Если вам нужно форматировать номер телефона при регистрации пользователя, то это можно сделать с помощью события OnBeforeUserAdd

и т.д. в зависимости от сущности в которую происходит сохранение нужно искать обработчик и дописывать в него код форматирования


Проверка ввода телефона при отправке формы

Периодически пользователи задают вопрос:
Мы установили решение, применили маску к полю телефона, но при нажатии кнопки "Отправить" в форме не происходит проверка заполненности телефона.

Ответ:
Решение задаёт маску ввода для конкретного поля и может влиять только на процесс ввода данных в это поле. На валидацию отправки всей формы, со стороны решения технически повлиять невозможно.

Валидация веденных данных при отправке зависит от конкретного сайта, от конкретной формы и от конкретного скрипта отправляющего форму - "врезаться" из решения в процесс отправки и универсально сделать проверку невозможно.

Соответственно реализовать проверку заполненности телефона можно только на уровне скрипта который делает процесс отправки по кнопке отправить.

События

Изменение маски для страны

Изменить маску ввода для страны можно с помощью добавления javascript-события.

Пример реализации события (в примере изменяется маска Казахстана):

BX.addCustomEvent("onCMaskEditMask", BX.delegate(function(maskParams){ if(maskParams.country == 'kz'){ maskParams.work_mask = '+8 DDD'; } // console.log('maskParams', maskParams); }));

(код события нужно разметить в .js файле, код страны и маску указать нужные вам. "Место под цифру" обозначается символом D)

Изменение параметров инициализации

Изменить параметры инициализации можно с помощью добавления javascript-события.

Данное событие поможет менять динамически настройки в зависимости от ваших потребностей. Например реализовать привязку маски к геолокации (в примере изменяется страна инициализации на Беларусь):

BX.addCustomEvent("onCMaskBeforeInit", BX.delegate(function(cMaskParamsObj){ var setCountry = 'by'; if(cMaskParamsObj.lib.country_show.includes(setCountry)){ cMaskParamsObj.lib.country_init = 'by'; } // console.log('cMaskParamsObj', cMaskParamsObj); }));