Проект: Валидация форм через jQuery

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

Ваше задание

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

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

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

  1. Создайте репозиторий на Github для проекта. Если возникли сложности, посмотрите инструкции на этой странице.
  2. Создайте пустой документ HTML.
  3. Подумайте, как создать элементы на форме и их валидаторы. Какие объекты и функции будут необходимы? Лучше сейчас подумать несколько лишних минут, чем потом переделывать программу, теряя часы впустую. Нарисуйте схему на бумаге перед тем, как вообще садиться за компьютер.
  4. Создайте элементы формы, их стилизация не обязательна.
  5. Создайте логику валидации.
  6. Проверьте все возможные варианты.
  7. Отправьте проект на Github.

Решения студентов

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

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

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