Имя пользователя и почта

Пора за ещё один проект! В этом мини-проекте вы примените события и формы из прошлого урока вместе со всем, что узнали до них. Как и в прошлых мини-проектах, в заданиях сказано, что должна делать страница, а как вы это напишете, решать вам.

Проект. Вы делаете форму регистрации для сайта: имя пользователя, адрес электронной почты, пароль, который вводят дважды, и возраст. Форма проверяет то, что набрал пользователь, и рядом с каждым полем говорит, что не так, а когда всё правильно, форма исчезает, и страница приветствует нового пользователя. За три упражнения вы проверите имя пользователя и почту, затем пароли и, наконец, возраст, а потом поприветствуете пользователя.

Страница. Форма в index.html уже готова. У каждого поля есть id, а рядом с ним — пустой span для сообщения об ошибке: name-error рядом с name и так далее. Под формой находится абзац welcome. У поля почты есть type="email", это делает его полем для адресов электронной почты, и браузер мог бы проверять его сам. Атрибут формы novalidate отключает это, потому что здесь всю проверку делает ваш скрипт. В начале script.js мы уже нашли элементы и сохранили их в константах.

Задача. Когда форму отправляют, страница не должна загружаться заново. Проверьте имя пользователя и почту, в обоих случаях без пробелов в начале и в конце:

• Если имя пользователя пустое, покажите Введите имя пользователя., а если оно короче 3 символов, покажите Имя пользователя должно быть не короче 3 символов.
• В адресе электронной почты должен быть @. Если его нет, покажите Введите правильный адрес электронной почты.

Показывайте каждое сообщение в span с ошибкой своего поля, а когда поле заполнено правильно, очищайте его сообщение. Если оба поля заполнены неправильно, оба сообщения показываются сразу.

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