Валидация форм ввода с помощью jQuery

Формы это пользовательское окно в ваш бэкенд. Вы узнали многое о них из предыдущих уроков, но сейчас мы сосредоточимся на использовании jQuery для взаимодействия с вашими формами, а в следующем уроке мы рассмотрим, как отправлять формы асинхронно с помощью AJAX.

Мы уже получили все инструменты, нужные нам для использования Javascript при валидации вводимой пользователем информации, но, вероятно, вы еще не использовали эти инструменты таким образом раньше.

Пункты для размышления

  • Как выбрать конкретную форму ввода с помощью jQuery?
  • Как выбрать текущую активную (в фокусе) форму ввода?
  • Как сделать активной следующую форму ввода?
  • Как определить, отмечен ли флажок(checkbox) или переключатель (radiobutton), с помощью jQuery?
  • Как запустить валидации в форме, заполняемой пользователем, в режиме реального времени?
  • Почему валидация только на стороне фронтэнда не полностью защищает от злоумышленников?
  • Как заблокировать элемент формы?
  • Как сделать поля с ошибкой подсвеченными и выделенным красным?
  • Как добавить сообщение об ошибке, непосредственно над полем с ошибкой?
  • Что такое jQuery Validate plugin и как его подключить к вашему проекту?

Ваши задания

  1. Прочтите Валидация вебформ: лучшие практические решения и руководства от Smashing Magazine, чтобы узнать все, что нужно по этой теме.
  2. Просмотрите Документацию для jQuery Validation Plugin для пользования плагином, сохраняя время и усилия.
  3. Прочтите Подход к валидации форм с помощью jQuery с нуля, чтобы увидеть эти вещи в действии.

Дополнительные ресурсы

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

  • Подход к вадидации ошибок в полях форм от Smashing Magazine
  • Ответ на то, как улучшить скрипт валидации формы (смотреть в ответах)
  • 10 полезных валидаций форм с помощью jQuery от speckyboy (некоторые ссылки утеряны)
  • Обширное руководство по юзабилити вебформ от Smashing Magazine

Поделиться уроком: