Матвей Земсков

Заметки веб-мастера

Воскресенье, 04 мая 2014 17:32

jQuery.maskedinput в веб-формах 1С-Битрикс

Оцените материал
(3 голосов)

Плагин jQuery maskedInput существует уже довольно длительное время. Он предназначен для обеспечения ввода данных в поля веб-формы по определенной маске. На практике обычно используется в текстовых полях форм для ввода номера телефона. В этой заметке я опишу как можно использовать этот плагин в шаблонах компонента bitrix:form.result.new на сайте под управлением «1С-Битрикс».

Скачать плагин 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

<?if(!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED!==true)die();
	foreach($arResult["QUESTIONS"] as $qkey => $arQuestion){
		if($arQuestion["STRUCTURE"][0]["FIELD_PARAM"] == "PHONE"){
			$html_code = '<input type="text" size="0" value="" name="form_'.$arQuestion["STRUCTURE"][0]["FIELD_TYPE"].'_'.$arQuestion["STRUCTURE"][0]["ID"].'" 
			data-ftype="'.$arQuestion["STRUCTURE"][0]["FIELD_PARAM"].'" />';
            $arResult["QUESTIONS"][$qkey]["HTML_CODE"] = $html_code;
		}
		
	}
?>

После этого в форме у поля «Телефон» появится атрибут data-ftype со значением PHONE. Этот атрибут необходим нам для того, чтобы передать его в коде вызова плагина в качестве параметра. В качестве альтернативы, если вы не хотите создавать дополнительный атрибут, вы может просто присвоить этому полю какой-нибудь класс. Я не передаю имя поля, потому что хочется сделать код более гибким и применять его неоднократно.

Теперь осталось только подключить jQuery и плагин jQuery.maskedInput. Для этого создадим файл component_epilog.php.

PHP

<?if(!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED!==true)die();
	CJSCore::Init(array("jquery"));
	$APPLICATION->AddHeadString('<script src="/bitrix/templates/.default/js/jquery.maskedinput-1.3.min.js"></script>', true);
?>
<script>
$(function(){
	$('input[data-ftype="PHONE"]').mask('+7 (999) 999-99-99');
});
</script>

В нем помимо подключения плагина мы вызываем его для поля «Телефон» нашей веб-формы.

Если все сделано правильно, то в поле «Телефон» в форме на странице /communication/web-forms/feedback/ можно будет ввести номер телефона по указанной маске. Ничего другого ввести не получится - jQuery.maskedInput не позволит этого сделать.

В завершении статьи хотелось бы обратить внимание читателя на то, что jQuery.maskedInput работает на стороне клиента. Для большей надежности необходимо проверять полученные данные и на стороне сервера. В случае с полями веб-форм на сайте под управлением «1С-Битрикс», нужно использовать валидаторы полей, которые доступны в системе. К сожалению, в системе не предусмотрен валидатор для проверки номера телефона. Но это не беда: узнать о том, как создать свой валидатор можно из документации для разработчиков, представленной на сайте CMS «1С-Битрикс».

Скачать код шаблона

Прочитано 11108 раз
Добавить комментарий

Комментарии   

 
0 # Алекснадр 30.07.2015 16:29
Приветствую!
На закладке «Ответ» в поле «Параметры» можно так и написать data-ftype="PHONE", не копируя шаблон.
Ответить | Ответить с цитатой | Цитировать
 
Мои услуги

Предлагаю следующие услуги:

  • Верстка шаблона сайта из дизайн-макета для CMS «1С-Битрикс Управление сайтом» и CMS “Joomla”
  • Создание форм различной сложности (обратная связь, анкеты и тп) для указанных CMS
  • Настройка и кастомизация компонентов и модулей для указанных CMS
  • Доработка модулей и компонентов для указанных CMS, добавление нестандартного функционала
  • Разработка лендингов (landing-pages)

По все вопросам обращайтесь через форму обратной связи

Скачать

Предлагаю вашему вниманию: