От автора: приветствую вас, друзья. Данная статья будет логическим продолжением нескольких предыдущих, где мы говорили о валидации форм, а также атрибутах и типах полей в HTML5, которые упрощают валидацию форм. В этой статье мы прибегнем уже к специальному плагину для Bootstrap, которые сделает валидацию еще проще и нагляднее. Начнем.
Вы можете задать вопрос, а чем же нас может не устраивать валидация форм, которую мы делали ранее? Ведь проверка формы на клиенте работает, чего еще надо? Все верно, работает. Однако для кого-то такая работа может не совсем подойти.
Например, клиент заполняет форму, нажимает кнопку отправить, и только после этого браузер начинает проводить проверку формы и подсказывать что не так. При этом подсказки работают только для одного поля формы за раз, то есть, если в форме будет 2 ошибки, то клиенту придется дважды нажать кнопку, чтобы увидеть обе ошибки, поскольку вторую ошибку он увидит только после исправления первой.
Быть может возможно сигнализировать об ошибке заполнения буквально в режиме онлайн? Да, это возможно. Здесь нам уже потребуются возможности JavaScript. Воспользуемся мы плагином Bootstrap Validator. На момент написания статьи доступна версия плагина 0.11.5. Вы можете скачать и использовать ее. Но я рекомендую использовать версию более раннюю — 0.9.0 — она более функциональна, на мой взгляд. Эту версию вы найдете в исходниках к статье.
Итак, подключим плагин после подключения файла JS фреймворка Bootstrap:
|
1 |
<script src="validator.min.js"></script> |
Теперь инициализируем плагин. Сделать это крайне просто:
|
1 2 3 |
$(function(){ $('#form').validator(); }); |
Мы указали, что плагин будет работать с формой, имеющей идентификатор form, поэтому присвоим такой id:
|
1 |
<form class="form-horizontal" method="post" id="form"> |
Этого вполне достаточно, чтобы плагин заработал. Что особенно приятно, так это то, что плагин понимает все те атрибуты и типы полей HTML5, которые мы использовали в предыдущих статьях. Соответственно, он будет производить проверку формы, руководствуясь написанными нами ранее правилами.
Пробуем проверить работу валидатора:
Как видим, валидатор в режиме онлайн сигнализирует нам, что с заполнением полей что-то не так, подсвечивая их красной рамкой. Давайте добавим еще немного функциональности. После каждого поля, которое мы хотим проверять, поставим вот такой span:
|
1 |
<span class="glyphicon form-control-feedback" aria-hidden="true"></span> |
Что это нам даст? Теперь правильно заполненные поля будут в режиме онлайн подсвечиваться зеленой рамкой. Также мы увидим иконки галочки и крестика, в зависимости от ситуации.
При желании можно управлять этими иконками, меняя их вид или оформление. Например, заменим иконки другими из комплекта Bootstrap. Для этого передадим необходимые параметры в метод плагина:
|
1 2 3 4 5 6 7 8 |
$(function(){ $('#form').validator({ feedback: { success: 'glyphicon-thumbs-up', error: 'glyphicon-thumbs-down' } }); }); |
Также немного сдвинем иконки влево. Для этого используем следующие стили:
|
1 2 3 |
.form-control-feedback{ right: 10px; } |
Как видим, все достаточно просто и безумно удобно. Дополнительным бонусом будет работа кнопки формы. Плагин блокирует кнопку и отправку формы до тех пор, пока мы не заполним все поля правильно. Замечательно, не так ли? На этом данную статью можно завершать. Дополнительно по данной теме вы можете посмотреть этот урок. На этом все. Удачи!
Комментарии (12)