Доброго времени суток, дорогой читатель! В статье «Модальная форма обратной связи» я поделился опытом, как создаются формы для обратной связи клиента с администрацией сайта. В ней, я надеюсь, вы смогли оценить все прелести валидации номера телефона, вводимого посетителем сайта. Эти прелести стали возможными благодаря HMTL5 и javascript - модуле от Twitter Bootstrap - Phone Helper.  В этой статье я расскажу вам более подробно об этом подключаемом модуле. Для начала Вам нужно подключить Twitter Bootstrap на Ваш сайт, как рассказано в статье «Bootstrap FrameWork» и сам модуль Phone Helper (ссылка для скачивания)

Подключение

Как обычно, подключаем javascript в конце html файла (после bootstrap.js)

<script src="path_to_file/bootstrap-formhelpers-phone.js"></script>

Использование

Теперь перейдем непосредственно к форме, где будем использовать валидатор номера телефона. Создадим небольшую форму для заказа звонка

<form action="" method="post" enctype="multipart/form-data" role="form">
<h4>Заказать звонок</h4>
<div class="form-group">
<label for="name">Имя</label>
<input type="text" class="form-control" name="name" id="name" value="" />
</div>
<div class="form-group">
<label for="phone">Телефон</label>
<input type="tel" name="phone" id="phone" class="form-control bfh-phone" data-format="+7 (ddd) ddd-dddd" value="" pattern="(\+[\d\ \(\)\-]{16})" />
</div>
<input type="submit" class="btn" name="submit_button" value="Заказать звонок">
</form>

В этом примере нас интересует строка <input type="tel" name="phone" id="phone" class="form-control bfh-phone" data-format="+7 (ddd) ddd-dddd" value="" pattern="(\+[\d\ \(\)\-]{16})" /> давайте разберем ее подробнее

  • type="tel" —  указывает хелперу с каким полем работать;
  • data-format="+7 (ddd) ddd-dddd" — здесь указываем формат и правило заполнения номера;
  • pattern="(\+[\d\ \(\)\-]{16})"—  это регулярное выражение, с помощью которого происходит проверка правила средствами HTML5.

Если вы будете использовать другой формат номера телефона, то измените и pattern

На этом ознакомление с Bootstrap Form Helpers Phone Input завершено, пользуетесь и развивайтесь! Пример этого помощника можно увидеть на одностраничном сайте (landing page), созданного мною для компании Scream Technologies в разделе "Контакты".

Если у Вас появились ко мне вопросы по данной статье, задавайте их в комментариях ниже.