Code Lab BetaBUILD. RUN. DISCOVER.

Code Lab е в разработка. Постепенно добавяме нови уроци и подобрения. Прогресът може да бъде изтрит.

JAVASCRIPT FORMS / CHAPTER 05 / Учене / LESSON 10

Проект регистрация.

Около 5–10 минути

Проект. Събираме всичко в малка регистрация: етикети, четене на полета, нормализация, правила, съобщения с aria и успех при submit.

План за submit слушателя: 1. preventDefault(). 2. Изчисти старите грешки (текст и aria-invalid). 3. Прочети и нормализирай: name.value.trim(), Number(age.value), terms.checked. 4. За всяко правило, което се чупи, сложи текст в <p id="…-error"> и aria-invalid="true" + aria-describedby. 5. Ако има грешки — статус със броя им; иначе — "Welcome" (симулиран успех, без мрежа).

Помощна функция намалява повторението:

function fail(field, error, text) { error.textContent = text; field.setAttribute("aria-invalid", "true"); field.setAttribute("aria-describedby", error.id); }

ВАЖНО за истинския свят: клиентската валидация подобрява удобството, но НЕ замества проверката на сървъра. Тук няма сървър — реалната регистрация трябва да валидира отново и да не вярва на браузъра.

Честа грешка: грешките остават след поправка; едно общо съобщение вместо по поле; 0 или празна възраст се бъркат.

Твоят урок

Построй симулирана регистрация (без мрежа). При submit на #signup: preventDefault; изчисти всички -error текстове и aria-invalid; после провери:
- name: след trim() поне 2 символа, иначе "Name needs 2+ letters" в #name-error;
- email: непразен и checkValidity(), иначе "Enter a valid email" в #email-error;
- age: цяло число 16–120, иначе "Age must be 16-120" в #age-error;
- terms: отбелязано, иначе "Accept the terms" в #terms-error.
За всяка грешка сложи на полето aria-invalid="true" и aria-describedby към неговия -error. Ако има грешки → #status = "Fix N errors" (N = брой); иначе "Welcome, <name>". Хост: Ana, "ana-at-example", 15, terms ✓ → 2 грешки. Забележка: клиентската валидация не замества проверката на сървъра.

HTML (точно този фиксчър):
<form id="signup" novalidate><label for="name">Name</label><input id="name" name="name" type="text"><p id="name-error"></p><label for="email">Email</label><input id="email" name="email" type="email"><p id="email-error"></p><label for="age">Age</label><input id="age" name="age" type="number"><p id="age-error"></p><label><input id="terms" name="terms" type="checkbox"> I accept the terms</label><p id="terms-error"></p><button type="submit">Sign up</button></form><p id="status"></p>

Хостът прави това след Run (по ред):
1. setValue #name = "Ana"
2. setValue #email = "ana-at-example"
3. setValue #age = "15"
4. setChecked #terms = true
5. submit #signup

<form id="signup" novalidate><label for="name">Name</label><input id="name" name="name" type="text"><p id="name-error"></p><label for="email">Email</label><input id="email" name="email" type="email"><p id="email-error"></p><label for="age">Age</label><input id="age" name="age" type="number"><p id="age-error"></p><label><input id="terms" name="terms" type="checkbox"> I accept the terms</label><p id="terms-error"></p><button type="submit">Sign up</button></form><p id="status"></p>

Събира етикети, нормализация, правила, aria и симулиран успех в един submit слушател.

lesson_10.jsJAVASCRIPT · PAGE

Зареждаме средата… При първо стартиране може да отнеме малко повече.

… 0/20000

STANDBY

DOM PREVIEWSTANDBY

Натисни Run — HTML се зарежда в sandbox iframe; Stop маха iframe-а (спира и безкраен цикъл).

01#email-error е "Enter a valid email"

02#email има aria-invalid и aria-describedby

03#status е "Fix 2 errors"

КонзолаНапиши кода. Включи системата.

›

Прогрес в Профила →

JAVASCRIPT LABKALKULATORI.BG

Code Lab BetaBUILD. RUN. DISCOVER.

Code Lab е в разработка. Постепенно добавяме нови уроци и подобрения. Прогресът може да бъде изтрит.

Зареждане…

JAVASCRIPT LABKALKULATORI.BG

<form id="signup" novalidate><label for="name">Name</label><input id="name" name="name" type="text"><p id="name-error"></p><label for="email">Email</label><input id="email" name="email" type="email"><p id="email-error"></p><label for="age">Age</label><input id="age" name="age" type="number"><p id="age-error"></p><label><input id="terms" name="terms" type="checkbox"> I accept the terms</label><p id="terms-error"></p><button type="submit">Sign up</button></form><p id="status"></p>