User Name and Email

Time for another project! This checkpoint puts the events and forms from the previous lesson to work, together with everything you learned before them. As in the previous checkpoints, the instructions say what the page should do, and how you write it is up to you.

The project. You're building the sign-up form of a website: a user name, an email, a password typed twice, and an age. The form checks what the user typed, says what's wrong next to each field, and when everything is right, the form disappears, and the page welcomes the new user. Over three exercises, you'll check the user name and the email, then the passwords, and finally the age, and then you'll welcome the user.

The page. The form in index.html is ready. Each field has an id, and next to it is an empty span for its error message: name-error next to name, and so on. Below the form is the paragraph welcome. The email field has type="email", which makes it a field for email addresses, and the browser could check it by itself. The attribute novalidate of the form turns that off, because here, your script does all the checking. At the top of script.js, we've already found the elements and stored them in constants.

The task. When the form is sent, the page must not load again. Check the user name and the email, both without the spaces at their start and end:

• When the user name is empty, show Enter a user name., and when it's shorter than 3 characters, show The user name must have at least 3 characters.
• An email address must contain @. When it doesn't, show Enter a valid email address.

Show each message in the error span of its field, and when a field is right, empty its message. When both fields are wrong, both messages show at once.

A tip: the next exercises add checks of more fields, and at the end, the form does something only when every field is right. A variable that remembers whether everything is right will come in handy.