Проект: Валидация форм через jQuery
Давайте немного отвлечемся от игр и вернемся в реальный мир для создания относительно простого проекта, в котором у вас будет возможность создать форму и сделать для нее валидацию. Для примера, зайдите на страничку регистрации сайта Mint.com и посмотрите на сообщения, которые появляются при неверно введенных вами данных.
Ваше задание
Создайте форму, аналогичную выше приведенной, содержащую e-mail, подтверждение e-mail, страну, почтовый индекс, пароль и его подтверждение. Она должна использовать построчную валидацию введенных пользователем данных и информировать о неправильно заполненных полях.
В отправке формы нет необходимости, но вы можете при нажатии на эту кнопку сообщить пользователю, что какое-то поле было заполнено с ошибкой. Если все поля заполнены верно, поздравьте пользователя с этим фактом.
Сделайте валидацию, используя плагин jQuery Validate, а затем сделайте то же самое без использования плагина. Посмотрите примеры создания собственных валидаторов в рекомендуемой литературе.
- Создайте репозиторий на Github для проекта. Если возникли сложности, посмотрите инструкции на этой странице.
- Создайте пустой документ HTML.
- Подумайте, как создать элементы на форме и их валидаторы. Какие объекты и функции будут необходимы? Лучше сейчас подумать несколько лишних минут, чем потом переделывать программу, теряя часы впустую. Нарисуйте схему на бумаге перед тем, как вообще садиться за компьютер.
- Создайте элементы формы, их стилизация не обязательна.
- Создайте логику валидации.
- Проверьте все возможные варианты.
- Отправьте проект на Github.
Решения студентов
- Решение 1 | Посмотреть в браузере
- Решение 2 | Посмотреть в браузере
- Решение 3 | Посмотреть в браузере
- Решение 4 | Посмотреть в браузере
- Решение 5 | Посмотреть в браузере
Дополнительные ресурсы
Этот раздел содержит полезные ссылки на дополнительные материалы. Это не обязательно, так что расценивайте их как нечто полезное, если вы хотите поглубже погрузиться в тему