The Life Starter
0 of 6 complete0%
Course Library · Lesson 1 of 6
Digital · Guided lesson

Separate steps from submission

About 29 minutes · 7 reading + 22 practice and checks
Time includes reading, practice, and questions. Extra videos or further study are optional.
See this course’s project requirements

A local two-step fictional workshop-registration form with labeled fields, preserved back navigation, error summary and a review-before-submit screen; no data is sent.

Keep your working files in your own notebook or software. Save a private description, checklist, and work link in My Proof.

What to include

  • Create a step map and verify that Next, Review, and local completion have distinct behavior.
  • Produce an inspected label/group map with working for/id associations.
  • Record missing, malformed, endpoint, and repaired input behavior with actionable error messages.
  • Build a Back-navigation matrix proving that edits change the intended value and preserve other fields.
  • Produce a literal-text review that rejects an invalid complete request and reflects changed valid values.
  • Deliver source plus separate rule-test and rendered-journey evidence, with honest unverified checks.

Review and revise

Use these criteria to check your work and choose what to improve.

  • The implementation or declared simulation follows the supplied contract and retains inspectable original inputs.
  • Normal, boundary and rejected cases are recorded with expected versus observed results.
  • The changed case has a correct explanation and does not rely on hidden state.
  • The project includes source, outputs, instructions and honest tool, privacy and verification limits.
Open the full course project
Want more background?
Before you begin

The idea in everyday life

Nova chooses Morning and requests 2 seats in a fictional workshop. Files: workshop.html, form-logic.mjs, test-form.mjs. Nothing is sent or stored.

The idea

A step change reveals another part of one form; it must not submit a real registration. The final review checks every required value again.

Follow along

Separate steps from submission — original worked practice

A step change reveals another part of one form; it must not submit a real registration. The final review checks every required value again.

Nova chooses Morning and requests 2 seats in a fictional workshop. Files: workshop.html, form-logic.mjs, test-form.mjs. Nothing is sent or stored.

  1. 1. Step 1

    Put the three files in a fresh folder; run python3 -m http.server 8765 --bind 127.0.0.1 from that folder. Open http://localhost:8765/workshop.html.

    You should see: Step 1 shows only nickname and session.

    A step change reveals another part of one form; it must not submit a real registration. The final review checks every required value again.

  2. 2. Step 2

    Read the submit handler: preventDefault runs before any step change. Enter Nova and choose Morning; activate Next.

    You should see: Step 2 appears without a page navigation.

    A step change reveals another part of one form; it must not submit a real registration. The final review checks every required value again.

  3. 3. Step 3

    Enter 2 seats and activate Next; read the visible review.

    You should see: Nova | Morning | 2 seat(s).

    A step change reveals another part of one form; it must not submit a real registration. The final review checks every required value again.

  4. 4. Step 4

    Activate Complete practice and inspect the local completion message; retain the step map 1 → 2 → review.

    You should see: A step/submission map with the local-only boundary recorded.

    A step change reveals another part of one form; it must not submit a real registration. The final review checks every required value again.

Now change one thing

Change the request to Afternoon with 3 seats. How many seats must the review show?

Your work

What to finish

Create a step map and verify that Next, Review, and local completion have distinct behavior.

Common mistake

Watch for this

Treating a Next button as proof of a completed external registration.

How can I tell I understand it?

Demonstrate the rule: A step change reveals another part of one form; it must not submit a real registration. The final review checks every required value again. Use the supplied variant to distinguish a changed result from a broken implementation.

Try 3 questions

Quick knowledge check

Answer all 3 questions. Get at least 2 right and the lesson completes automatically.

Not yet passed

You’ll get an explanation for each answer. Signed in? Your results save to your account.

1Nova activates Next on step 1. What should that action do?
2Which workshop action belongs after both input steps?
3What does the local completion message prove?
0 of 3 answeredApply the lesson to a short question, then review the explanation.
1
Finish this lesson

Pass the check. We’ll save the progress.

Answer all 3 questions above and get at least 2 right. You can review the explanations and try again.

Go to the knowledge check
Tools, templates, and lesson sources

Tools and templates

Tools open in a new tab so you can keep your place here.

Sources and further reading

Explore the references behind this lesson.

developer.mozilla.org — Constraint_validation
Source & access notes · checked 2026-10-01

Relevant documented module/API behavior inspected during expansion authoring; actual execution evidence is recorded separately. No grant eligibility is established.

Access: Official page retrieved with the web reader on 2026-10-01. Documentation reading does not certify execution in every native tool or browser.

Reuse: Original local practice files, fictional data, worked examples and questions. Concepts paraphrased and linked; source exercises are not copied.

developer.mozilla.org — fieldset
Source & access notes · checked 2026-10-01

Relevant documented module/API behavior inspected during expansion authoring; actual execution evidence is recorded separately. No grant eligibility is established.

Access: Official page retrieved with the web reader on 2026-10-01. Documentation reading does not certify execution in every native tool or browser.

Reuse: Original local practice files, fictional data, worked examples and questions. Concepts paraphrased and linked; source exercises are not copied.

Report a problem with this lesson

Tell us what went wrong. Please leave out personal information and private project contents.

No sign-in needed.