Code Lab BetaBUILD. RUN. DISCOVER.

Code Lab is in development. New lessons and improvements are on the way. Progress can be deleted.

JAVASCRIPT FORMS / CHAPTER 05 / Learn / LESSON 10

Signup Project.

About 5–10 minutes

Project. We combine everything into a small signup: labels, reading fields, normalization, rules, aria messages, and success on submit.

Plan for the submit listener: 1. preventDefault(). 2. Clear old errors (text and aria-invalid). 3. Read and normalize: name.value.trim(), Number(age.value), terms.checked. 4. For every rule that breaks, put text into <p id="…-error"> and set aria-invalid="true" + aria-describedby. 5. If there are errors — a status with their count; otherwise "Welcome" (simulated success, no network).

A helper reduces repetition:

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

IMPORTANT in the real world: client-side validation improves convenience but does NOT replace the server check. There is no server here — a real signup must validate again and never trust the browser.

Common mistake: errors that stay after a fix; one general message instead of one per field; a 0 or empty age being confused.

Your lesson

Build a simulated signup (no network). On submit of #signup: preventDefault; clear every -error text and aria-invalid; then check:
- name: at least 2 characters after trim(), otherwise "Name needs 2+ letters" in #name-error;
- email: non-empty and checkValidity(), otherwise "Enter a valid email" in #email-error;
- age: an integer 16-120, otherwise "Age must be 16-120" in #age-error;
- terms: checked, otherwise "Accept the terms" in #terms-error.
For each error set aria-invalid="true" and aria-describedby to its -error on the field. If there are errors → #status = "Fix N errors" (N = count); otherwise "Welcome, <name>". Host: Ana, "ana-at-example", 15, terms ✓ → 2 errors. Note: client validation does not replace server checks.

HTML (exactly this fixture):
<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>

The host does this after Run (in order):
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>

Combines labels, normalization, rules, aria, and simulated success in one submit listener.

lesson_10.jsJAVASCRIPT · PAGE

Loading the runtime… The first launch may take a little longer.

… 0/20000

STANDBY

DOM PREVIEWSTANDBY

Press Run — HTML loads in a sandbox iframe; Stop removes the iframe (also kills infinite loops).

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

02#email has aria-invalid and aria-describedby

03#status is "Fix 2 errors"

ConsoleWrite the code. Bring it online.

›

Progress in Profile →

JAVASCRIPT LABKALKULATORI.BG

Code Lab BetaBUILD. RUN. DISCOVER.

Code Lab is in development. New lessons and improvements are on the way. Progress can be deleted.

Loading…

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>