На этом уроке мы рассмотрим, как можно с помощью классов Twitter Bootstrap 3 изменять состояние элементов управления формы при её проверке с помощью встроенных средств HTML5.
Использование классов Twitter Bootstrap 3 для отображения результатов проверки формы
Процесс создания формы и её валидации представим в виде следующих шагов:
Создадим форму для регистрации пользователя.
Создадим модальное окно, содержащее форму для регистрации
Создадим кнопку для вызова модального окна.
Создадим сообщение, которое будет отображаться при закрытии модального окна. Сообщение будет отображаться только в том случае, если пользователь нажал на кнопку «Регистрация» и форма в этот момент валидна.
В зависимости от результата проверки данных в элементах управления формы, мы будем добавлять к ним одни классы, и удалять другие.
Т.е. если данные в элементе управления не валидны, то мы выполняем следующее:
А если данные в элементе управления валидны, то мы выполняем всё наоборот, т.е.:
Bootstrap валидация форм
Дата публикации: 2016-10-06
От автора: приветствую вас, друзья. Данная статья будет логическим продолжением нескольких предыдущих, где мы говорили о валидации форм, а также атрибутах и типах полей в HTML5, которые упрощают валидацию форм. В этой статье мы прибегнем уже к специальному плагину для Bootstrap, которые сделает валидацию еще проще и нагляднее. Начнем.
Вы можете задать вопрос, а чем же нас может не устраивать валидация форм, которую мы делали ранее? Ведь проверка формы на клиенте работает, чего еще надо? Все верно, работает. Однако для кого-то такая работа может не совсем подойти.
Например, клиент заполняет форму, нажимает кнопку отправить, и только после этого браузер начинает проводить проверку формы и подсказывать что не так. При этом подсказки работают только для одного поля формы за раз, то есть, если в форме будет 2 ошибки, то клиенту придется дважды нажать кнопку, чтобы увидеть обе ошибки, поскольку вторую ошибку он увидит только после исправления первой.
Быть может возможно сигнализировать об ошибке заполнения буквально в режиме онлайн? Да, это возможно. Здесь нам уже потребуются возможности JavaScript. Воспользуемся мы плагином Bootstrap Validator. На момент написания статьи доступна версия плагина 0.11.5. Вы можете скачать и использовать ее. Но я рекомендую использовать версию более раннюю — 0.9.0 — она более функциональна, на мой взгляд. Эту версию вы найдете в исходниках к статье.
Итак, подключим плагин после подключения файла JS фреймворка Bootstrap:
Фреймворк Bootstrap 5. Быстрый старт
Изучите основы Bootstrap 5 на практическом примере по верстке интернет-магазина с нуля
На этом уроке мы рассмотрим, как можно с помощью классов Twitter Bootstrap 3 изменять состояние элементов управления формы при её проверке с помощью встроенных средств HTML5.
Использование классов Twitter Bootstrap 3 для отображения результатов проверки формы
Процесс создания формы и её валидации представим в виде следующих шагов:
Создадим форму для регистрации пользователя.
2. Создадим модальное окно, содержащее форму для регистрации
3. Создадим кнопку для вызова модального окна.
4. Создадим сообщение, которое будет отображаться при закрытии модального окна. Сообщение будет отображаться только в том случае, если пользователь нажал на кнопку «Регистрация» и форма в этот момент валидна.
В зависимости от результата проверки данных в элементах управления формы, мы будем добавлять к ним одни классы, и удалять другие.
Т.е. если данные в элементе управления не валидны, то мы выполняем следующее:
А если данные в элементе управления валидны, то мы выполняем всё наоборот, т.е.:
Формы
Примеры и рекомендации по использованию стилей управления формами, параметров макета и настраиваемых компонентов для создания самых разнообразных форм.
Обзор
Элементы управления формой Bootstrap расширяются на наши стили перезагрузки форм с помощью классов. Используйте эти классы, чтобы выбрать их настраиваемые отображения для более согласованного отображения в браузерах и на устройствах.
Обязательно используйте соответствующий атрибут type для всех входных данных (например, email для адреса электронной почты или number для числовой информации), чтобы воспользоваться преимуществами новых элементов управления вводом, таких как проверка электронной почты, выбор номера и т.д.
Вот быстрый пример, демонстрирующий стили формы Bootstrap. Продолжайте читать, чтобы узнать о необходимых классах, макете формы и многом другом.
Форма управления
Только чтение
Добавьте логический атрибут readonly к полю ввода, чтобы предотвратить изменение входного значения. Поля ввода, доступные только для чтения, выглядят светлее (как и отключенные входы), но сохраняют стандартный курсор.
Только для чтения обычный текст
Ввод диапазона
Флажки и радио
Поддерживаются отключенные флажки и радио. Атрибут disabled применит более светлый цвет для обозначения состояния ввода.
По умолчанию (сложены)
Строковые
Без меток
Макет
Поскольку Bootstrap применяет display: block и width: 100% почти ко всем элементам управления формой, формы по умолчанию будут располагаться вертикально. Дополнительные классы могут использоваться для изменения этого макета для каждой формы.
Группы форм
Сетка формы
Более сложные формы могут быть построены с использованием наших классов сетки. Используйте их для макетов форм, требующих нескольких столбцов, разной ширины и дополнительных параметров выравнивания.
Строка формы
С помощью системы сеток также можно создавать более сложные макеты.
Горизонтальная форма
Иногда Вам может потребоваться использовать утилиты margin или padding для создания идеального выравнивания, которое Вам нужно. Например, мы удалили padding-top на нашей метке сгруппированных радио, чтобы лучше выровнять базовую линию текста.
Размер меток горизонтальной формы
Размер колонки
Автоматический размер
Затем Вы можете снова смешать это с классами столбцов, зависящими от размера.
Строковые формы
Также поддерживаются настраиваемые элементы управления и выбор формы.
Альтернативы скрытым ярлыкам
Текст помощи
Связывание текста помощи с элементами управления формой
Встроенный текст может использовать любой типичный встроенный элемент HTML (будь то , или что-то еще) с не более чем служебным классом.
Отключенные формы
Добавьте логический атрибут disabled для ввода, чтобы предотвратить взаимодействие с пользователем и сделать его более светлым.
Предупреждение с якорями
Вы также можете выбрать один из маленьких или больших пользовательских элементов, чтобы они соответствовали нашим текстовым полям аналогичного размера.
Также поддерживается атрибут multiple :
Как и атрибут size :
Диапазон
Файловый браузер
Файловый ввод является самым сложным из всех и требует дополнительного JavaScript, если Вы хотите подключить их к функциональному Выбрать файл… и выбранному тексту имени файла.
Перевод или настройка строк с помощью SCSS
Вот lang(ru) в действии над пользовательским вводом файла для русского перевода:
Вам нужно будет правильно установить язык Вашего документа (или его поддерева), чтобы отображался правильный текст. Это можно сделать с помощью атрибута lang в элементе или Content-Language HTTP header среди других методов.
Перевод или настройка строк с помощью HTML
Создаем контактную форму с использованием Bootstrap, PHP и AJAX
Структура файлов и папок
Мы создадим корневой каталог и добавим в него следующие файлы и папки:
Нам нужно будет подключить некоторые front-end библиотеки:
С учетом этих библиотек структура файлов будет выглядеть следующим образом:
Создание формы
Откройте файл index.html и скопируйте в него следующую базовую структуру AJAX формы обратной связи :
Без борьбы не бывает победы
Дальше нужно вставить следующий код внутри тегов :
Типографика
Класс form-control применяется для каждого элемента ввода, чтобы он занимал всю ширину контейнера ( ширина 100% ). Этот класс также добавляет различные стили, которые позволяют создать легко читаемый элемент формы ( большой размер, четкие края и т.д. ).
После этих столбцов мы включаем тело сообщения. Мы оборачиваем его в form-group и применяем те же стили, что и для меток и для текстовых полей.
Призыв к действию
После кнопки мы включили div с идентификатором #msgSubmit и применили следующие классы: « h3 text-center hidden «. Класс h3 помогает создать больший заголовок, text-center устанавливает выравнивание текста по центру, а hidden — задает display: none и visible: hidden :
Добавление функционала отправки данных
Откройте файл scripts.js и скопируйте в него следующий код:
event.preventDeafult() останавливает отправку данных формы при обновлении страницы без выбора действия в форме. И в конце этот код запрашивает функцию submitForm(); :
Далее мы создаем функцию submitForm(); следующим образом:
Три инициированные переменные захватывают значения каждого из полей ввода формы и передают их переменной JavaScript для использования в дальнейшем.
Подключение к функции PHP Mail
Наводим блеск
Теперь мы сконцентрируемся на обеспечении обратной связи с пользователем с помощью различных дополнительных функций, которые можно включить. В частности, мы рассмотрим обратную связь формы с помощью обработки ошибок, как на стороне клиента, так и на стороне сервера.
Также для валидации формы мы используем некоторые инструменты:
Структура проекта теперь должна выглядеть следующим образом:
Валидация формы
Давайте начнем с установки валидатора после ввода данных формы обратной связи AJAX PHP. Перейдите в файл scripts.js и отредактируйте первый фрагмент кода, который вызывает функцию SubmitForm() после того, как данные формы отправлены.
Его нужно изменить следующим образом:
Этот новый фрагмент кода проверяет, нашел ли Bootstrap Validator проблемы и остановил ли работу кода. Если нет, мы продолжаем выполнение действий в стандартном режиме. Нам все еще нужно исключить действие по умолчанию ( перезагрузку страницы без заполнения формы ) из сценария представления данных формы.
Теперь, если мы нажмем кнопку отправки данных формы, не заполнив все поля, пустые будут выделяться красным цветом:
Внутри каждой form-group под полем ввода данных нужно разместить следующий HTML-код :
Теперь при повторной отправке данных AJAX JQuery формы будет выводиться сообщение об ошибке, если поля формы не были заполнены: “ Please fill in this field. ”. Добавив data-атрибут для вводимых данных под названием “ data-error ”, можно включить пользовательское сообщение об ошибке.
Добавление анимации обратной связи
Мы добавили функционал для индикации незаполненных полей формы. Но было бы неплохо добавить в форму дополнительную анимацию и несколько сообщений, которые дадут пользователю знать, что происходит. В настоящее время при успешной отправке данных формы появляется сообщение « Message Submitted! «, но как насчет ошибок?
Чтобы задействовать существующий код, мы изменим существующее сообщение об успешной отправке данных. Первым делом удалим текст « Message Submitted! » из HTML-разметки и оставим пустой div :
Теперь нужно создать новую функцию для обработки статуса сообщения. Добавьте эту функцию в нижнюю часть файла scripts.js :
Теперь, если вы не заполнили все поля, будет выводиться сообщение об ошибке “ Did you fill in the form properly? »
Последний шаг для этой новой функции submitMSG — вызвать ее, когда данные формы отправлены успешно. Обновите функцию formSuccess() следующим образом:
Встряхнемся
Давайте добавим ко всей форме анимацию ошибки, универсальная анимация “ тряски ” должна подойти!
Создайте сразу после функции formSuccess() новую и назовите ее formError() :
Теперь, когда пользователь попытается отправить данные формы, не заполнив все поля, она будет трястись, чтобы он понял, что что-то не так.
Больше валидации
Валидация на стороне клиента — это хорошо, но любой пользователь может отключить ее и отправить форму с пустыми полями, отредактировав код в браузере. Необходимо создать сервис валидации на стороне сервера.
И последний этап — нужно принять новое сообщение в AJAX и вывести его в форме. Нам нужно обновить объект AJAX в файле scripts.js следующим образом:
Заключение
Дайте знать, что вы думаете по данной теме материала в комментариях. Мы крайне благодарны вам за ваши комментарии, подписки, лайки, дизлайки, отклики!