Jméno a e-mail

Čas na další projekt! Tento miniprojekt využije události a formuláře z minulé lekce a k tomu všechno, co jste se naučili před ní. Stejně jako v předchozích miniprojektech pokyny říkají, co má stránka dělat, a jak to napíšete, je na vás.

Projekt. Stavíte registrační formulář webu: uživatelské jméno, e-mail, heslo napsané dvakrát a věk. Formulář zkontroluje, co uživatel napsal, u každého textového pole řekne, co je špatně, a když je všechno v pořádku, formulář zmizí a stránka nového uživatele přivítá. Ve třech cvičeních zkontrolujete uživatelské jméno a e-mail, potom hesla a nakonec věk. Pak uživatele přivítáte.

Stránka. Formulář v index.html je hotový. Každé textové pole má id a vedle něj je prázdný span pro jeho chybovou zprávu: jmeno-chyba vedle jmeno a tak dále. Pod formulářem je odstavec vitejte. Textové pole pro e-mail má type="email", takže je určené pro e-mailové adresy a prohlížeč by ho uměl zkontrolovat sám. Atribut novalidate formuláře to vypne, protože tady všechno kontroluje váš skript. Na začátku script.js jsme už prvky našli a uložili do konstant.

Úkol. Když se formulář odešle, stránka se nesmí znovu načíst. Zkontrolujte uživatelské jméno a e-mail, obojí bez mezer na začátku a na konci:

• Když je uživatelské jméno prázdné, ukažte Zadejte uživatelské jméno., a když je kratší než 3 znaky, ukažte Uživatelské jméno musí mít aspoň 3 znaky.
• E-mailová adresa musí obsahovat @. Když ho neobsahuje, ukažte Zadejte platnou e-mailovou adresu.

Každou zprávu ukažte v chybovém span jejího textového pole, a když je pole v pořádku, jeho zprávu vyprázdněte. Když jsou špatně obě textová pole, ukážou se obě zprávy najednou.

Tip: další cvičení přidají kontroly dalších textových polí a na konci formulář něco udělá, jen když bude všechno v pořádku. Proměnná, která si pamatuje, jestli je všechno v pořádku, se vám bude hodit.