JS проверка номера телефона в для модуля обратной связи drupal 7

Аватар пользователя ulogin_facebook_100003178678785
Автор: 
Александр Поляков

В предыдущей статье я рассказал как создать формы обратного звонка drupal 7

 

Теперь не плохо было бы проверять данный которые вводит пользователь до отправки формы

 

Постановка задачи

Пользователь должен ввести номер телефона в формате

 +x (xxx) xxx-xx-xx

 

Ход выполнения

  1. Подключить JS библиотеки
  2. Написать скрипт проверки данных

 

1. Подключить JS библиотеки

Для решения данной задачи нам подойдет плагин jQuery

Masked Input

https://github.com/digitalBush/jquery.maskedinput

вот пример его работы

http://digitalbush.com/projects/masked-input-plugin/

 

Для работы ему требуется jQuery >= 1.7 версии, а в друпале по умолчанию 1.4 не беда установим jQuery Update

 

Но получается что наш модуль зависим от jQuery Update нужно указать это в .info файле.

Выглядит это так dependencies[] = jquery_update

 

Листинг callback.info

 

name=Callback

description=Формы обратной связи.

package=User feedback

dependencies[] = jquery_update

core=7.x

 

Теперь если посмотреть на странице настройки модуля то можно увидеть

Requires: Jquery_update (missing)

Модуль не установлен. Нужно его установить. Можете сделать это как вам удобнее, скопировав в папку или через модуль update движка.

 

Я предпочитаю drush.

Выключаем модуль

drush dis callback

Включаем модуль

drush en callback

 

Драш спросить сначала хотим ли мы скачать jquery_update, а потом хотим ли включить.

Отвечаем «y» на оба вопроса.

 

Смотрим на странице настройки модулей там должно быть написано Requires: jQuery Update (enabled)

Настраиваем на странице admin/config/development/jquery_update модуль на версию больше или равную 1.7,а для административной части оставим по умолчанию. Я поставил 1.9.

Качаем jQuery Masked Input создаем в папку js внутри callback и копируем файл скрипта туда.

Заодно создадим в папке js еще один файл для нашего скрипта с названием callback.js

 

Эти два файла нам нужно подключить к нашему модулю, используем для этого hook_init().

Для этого в самом начале файла callback.module сразу после <?php пишем:

 

function callback_init() {

  drupal_add_js(drupal_get_path('module', 'callback') .'/js/callback.js');

  drupal_add_js(drupal_get_path('module', 'callback') .'/js/jquery.maskedinput.min.js');

}

 

Разберем что тут написано.

  1. drupal_add_js() - функция подключает js файлы по url.
  2. drupal_get_path('module', 'callback') — получаем путь до нашего модуля.
  3. .'/js/jquery.maskedinput.min.js' и .'/js/callback.js' — собственно сами файлы скриптов.

 

Заходим в admin/config/development/performance и очишаем кэш.

Можно проверить подключились скрипты или нет проверив наличие строк в коде странице в разделе <head>

 

2. Пишем скрипт проверки данных

Нам нужно прикрепить проверку к полю phone смотрим какой id присвоен полю.

Для этого крикаем правой кнопкой по полю Телефон и нажимает просмотр кода элемента.

Видим вот это.

<input type="text" id="edit-phone" name="phone" value="" size="30" maxlength="50" class="form-text required">

Ага id="edit-phone" отлично пишем проверку:

$("#edit-phone").mask("+9 (999) 999-99-99");

При желании можно поправить на свое усмотрение.

 

Полностью содержание файла callback.js

 

(function ($) {

  $(function () {

    jQuery(document).ready(function () {

 

      $("#edit-phone").mask("+ 9 (999) 999-99-99");

 

    });

  });

})(jQuery);

 

Обновляем страницу и ставим курсор в толе «Телефон» там сразу появляется маска ввода + _ (___) ___-__-__ причем не дает набрать буквы.

Если не появилась почистите кэш и проверьте на ошибки код.

 

Заключение:

Сегодня мы узнали как подключить JS библиотеки к своему модулю drupal 7

и как сообщить друпалу, что модуль зависим от другого модуля.

 

Все внесенные изменения в файлы можно увидеть в комите JS validation field 'phone' https://github.com/Backstabe/callback/commits/master

 

Ну и естественно файлы модуля можно скачать тут https://github.com/Backstabe/callback

 

Спасибо всем кто осилил эти многабукф до конца.

Продолжение следует...

*VISA/MasterCard