Изменение стандартного сообщения в popover в Bootstrap

Быстрый ответ:

Если хотите заменить стандартное сообщение об ошибке при проверке поля на заполненность в Bootstrap, воспользуйтесь атрибутом setCustomValidity. В обработчики события oninvalid и oninput требуется добавить это поле:

<input required oninvalid="this.setCustomValidity('Введите корректные данные. Вы ведь звезда! ✨')" oninput="this.setCustomValidity('')" />

Само всплывающее окно настраивается через метод .popover:

$('#myInput').popover({ trigger: 'focus' });

Улучшаем UX: Направляйте, а не укоряйте

Доброжелательные и информативные сообщения проверки помогут пользователям. Используйте атрибут placeholder, чтобы подсказывать, что нужно ввести до начала проверки:

<input type="text" required placeholder="Введите ваше имя пользователя, как настоящий босс" oninvalid="this.setCustomValidity('Не забывайте свой плащ! Требуется имя пользователя!')" oninput="this.setCustomValidity('')" />

Следите за тем, как пользователь взаимодействует с формой – обрабатывайте нажатия клавиши Enter так, чтобы проверка формы не создавала неудобств.

Важное замечание: Не отказывайтесь от проверки на сервере

Проверка данных на стороне клиента позволяет быстро давать обратную связь пользователю, но для безопасности и сохранения целостности данных крайне важен серверный контроль.

Традиционный подход с jQuery

Если HTML5 вам не подходит, то старые проекты или ситуации, где уже используется jQuery, могут быть модифицированы небольшим добавлением кода:

$('input[required]').on('invalid', function() {
    this.setCustomValidity('Пожалуйста, введите данные. Ммм!');
}).on('input', function() {
    this.setCustomValidity('');   // Очистка сообщения после ввода
});

Но следите за возможными конфликтами и зависимостями при использовании jQuery.

Сохраняем доступность: не ослепляйте пользователей

Проверяйте, что изменения, вносимые вами, не ухудшают доступность информации. Сообщения об ошибках должны быть понятны пользователям скринридеров, а атрибуты ARIA помогут вам с этим.

Визуализация

Пример, как можно "упаковать" сообщение проверки:

Стандартный Вышибала: "Предъявите членский билет, пожалуйста! 🚫"
Обходительный Вышибала:  "Можно увидеть ваше удостоверение? 📝✅"

Меняем подход к формулировке сообщений:

document.querySelector('input').oninvalid = function(event) {
    event.target.setCustomValidity('Каков ваш волшебный пароль, пожалуйста? 📣');
};

Облегчите работу со сложными формами: используйте библиотеки

Для сложных задач проверки можно использовать такие библиотеки, как Parsley.js или validate.js. Они предлагают расширенный функционал и улучшают пользовательский опыт.

Оцените возможное влияние на производительность сайта при использовании данных библиотек.

Полезные материалы

1. Validation · Bootstrap v5.0 — исчерпывающее руководство по проверке форм в Bootstrap.
2. Client-side form validation – Learn web development | MDN — инструкция по созданию пояснительных сообщений об ошибках.
3. javascript – How to set custom validation messages for HTML forms? – Stack Overflow — обсуждение способов настройки сообщений проверки.
4. Popovers · Bootstrap v5.0 — рекомендации по работе с всплывающими окнами Bootstrap для отображения ваших сообщений.
5. How to Create Form Layouts with Bootstrap 5 – Tutorial Republic — создание форм с помощью Bootstrap в соответствии с вашими предпочтениями.
6. JavaScript Form Validation — руководство по проверке форм на JavaScript от W3Schools.