Bootstrap валідація форм

34

Від автора: вітаю вас, друзі. Дана стаття буде логічним продовженням кількох попередніх, де ми говорили про валідації форм, а також атрибутах і типи полів в HTML5, які спрощують валідацію форм. У цій статті ми вдамося вже до спеціального плагіну для Bootstrap, які зробить валідацію ще простіше і наочніше. Почнемо.

Ви можете задати питання, а чому ж нас не може влаштовувати валідація форм, яку ми робили раніше? Адже перевірка форми на клієнті працює, чого ще треба? Все вірно, працює. Однак для кого-то така робота може не зовсім підійти.

Наприклад, клієнт заповнює форму, натискає кнопку відправити, і тільки після цього браузер починає проводити перевірку форми і підказувати що не так. При цьому підказки працюють тільки для одного поля форми, тобто, якщо в формі 2 помилки, то клієнтові доведеться двічі натиснути кнопку, щоб побачити обидві помилки, оскільки другу помилку він побачить тільки після виправлення першої.

Бути може можливо сигналізувати про помилку заповнення буквально в режимі онлайн? Так, це можливо. Тут нам вже потрібні можливості JavaScript. Скористаємося ми плагіном Bootstrap Validator. На момент написання статті доступна версія плагіна 0.11.5. Ви можете завантажити і використовувати її. Але я рекомендую використовувати більш ранню версію — 0.9.0 — вона більш функціональна, на мій погляд. Цю версію ви знайдете в исходниках до статті.

Отже, підключимо плагін після підключення файлу JS фреймворку Bootstrap:

Тепер ініціалізуємо плагін. Зробити це дуже просто:

$(function(){
$(‘#form’).validator();
});

Ми вказали, що плагін буде працювати з формою, що має ідентифікатор form, тому присвоїмо такий id:

Цього цілком достатньо, щоб плагін заробив. Що особливо приємно, так це те, що плагін розуміє всі ті атрибути та типи полів HTML5, які ми використовували в попередніх статтях. Відповідно, він буде проводити перевірку форми, керуючись написаними нами раніше правилами.

Пробуємо перевірити роботу валідатора:

Як бачимо, валідатор у режимі онлайн сигналізує нам, що із заповненням полів щось не так, підсвічуючи їх червоною рамкою. Давайте додамо ще трохи функціональності. Після кожного поля, яке ми хочемо перевіряти, поставимо ось такий span:

Що це нам дасть? Тепер правильно заповнені поля в режимі онлайн підсвічуватися зеленою рамкою. Також ми побачимо іконки галочки і хрестика, в залежності від ситуації.

При бажанні можна управляти цими іконами, змінюючи їх вигляд чи оформлення. Наприклад, замінимо іконки з іншими комплекту Bootstrap. Для цього передамо необхідні параметри метод плагіна:

$(function(){
$(‘#form’).validator({
feedback: {
success: ‘glyphicon-thumbs up’,
error: ‘glyphicon-thumbs-down’
}
});
});

Також трохи зрушимо іконки вліво. Для цього використовуємо наступні стилі:

.form-control-feedback{
right: 10px;
}

Як бачимо, все досить просто і дуже зручно. Додатковим бонусом буде робота кнопки форми. Плагін блокує кнопку і відправку форми до тих пір, поки ми не заповнимо всі поля правильно. Чудово, чи не так? На цьому дану статтю можна завершувати. Додатково по даній темі ви можете подивитися цей урок. На цьому все. Удачі!