Скачать плагин jQuery maskedInput можно по указанным ниже ссылкам (обычная и сжатая версия):
http://cloud.github.com/downloads/digitalBush/jquery.maskedinput/jquery.maskedinput-1.3.js
http://cloud.github.com/downloads/digitalBush/jquery.maskedinput/jquery.maskedinput-1.3.min.js
Как обычно все действия я провожу в демо-версии системы «1С-Битрикс» редакции «Стандарт». Во время установки на восьмом шаге при выборе решения – выберите «Демо-сайт для разработчиков».
После установки необходимо переключить немного настроить модуль «Веб-формы» - переключить его в расширенный режим обработки форм. Для этого зайти в Настройки→Настройки модулей→Веб-формы и отключить флажок «Использовать упрощённый режим редактирования форм».
Скачанный плагин нужно разместить в папку шаблона сайта. Я создал папку js в папке шаблона по-умолчанию (/bitrix/templates/.default) и скопировал в нее файл jquery.maskedinput-1.3.min.js.
Итак, переходим к настройке формы. Заходим в Сервисы→Веб-формы→Настройка веб-форм. У формы с именем SIMPLE_FORM_2 есть вопрос №14 (Телефон-PHONE), именно к нему мы и будем подключать плагин jQuery.maskedInput. Перейдем к вопросам формы: кликнем по количеству вопросов в столбце «Вопросы», выберем нужный вопрос и изменим его параметры. На закладке «Ответ» введем в поле «Параметры» значение PHONE. Обращаю внимание читателя, что эта возможность доступна только в расширенном режиме редактирования форм.
Сама форма расположена на странице «Обратная связь» с адресом /communication/web-forms/feedback/index.php. Скопируем шаблон компонента bitrix:form.result.new и присвоим ему имя masked.
Далее в папке шаблона masked нужно создать файл result_modfier.php.
PHP
После этого в форме у поля «Телефон» появится атрибут data-ftype
со значением PHONE
. Этот атрибут необходим нам для того, чтобы передать его в коде вызова плагина в качестве параметра. В качестве альтернативы, если вы не хотите
создавать дополнительный атрибут, вы может просто присвоить этому полю какой-нибудь класс. Я не передаю имя поля, потому что хочется сделать код более гибким и применять его неоднократно.
Теперь осталось только подключить jQuery и плагин jQuery.maskedInput. Для этого создадим файл component_epilog.php.
PHP
В нем помимо подключения плагина мы вызываем его для поля «Телефон» нашей веб-формы.
Если все сделано правильно, то в поле «Телефон» в форме на странице /communication/web-forms/feedback/ можно будет ввести номер телефона по указанной маске. Ничего другого ввести не получится - jQuery.maskedInput не позволит этого сделать.
В завершении статьи хотелось бы обратить внимание читателя на то, что jQuery.maskedInput работает на стороне клиента. Для большей надежности необходимо проверять полученные данные и на стороне сервера. В случае с полями веб-форм на сайте под управлением «1С-Битрикс», нужно использовать валидаторы полей, которые доступны в системе. К сожалению, в системе не предусмотрен валидатор для проверки номера телефона. Но это не беда: узнать о том, как создать свой валидатор можно из документации для разработчиков, представленной на сайте CMS «1С-Битрикс».