Hack University - Capstone II: form validation walkthrough

The signup form

The last section of the landing page, built with the lesson 3-1 patterns:

<section id="signup">
  <h2>Join the group</h2>
  <form id="signup-form" novalidate>
    <label for="name">Name</label>
    <input id="name" name="name" type="text">

    <label for="email">Email</label>
    <input id="email" name="email" type="email">

    <label for="password">Password</label>
    <input id="password" name="password" type="password">

    <button type="submit">Sign up</button>
  </form>
  <p id="form-errors"></p>
</section>

novalidate switches off the browser's built-in checks because we are writing better ones with custom messages. The wiring comes straight from lesson 8-3:

const form = document.querySelector("#signup-form");

form.addEventListener("submit", (event) => {
  event.preventDefault();
  const errors = validate({
    name: document.querySelector("#name").value,
    email: document.querySelector("#email").value,
    password: document.querySelector("#password").value,
  });
  document.querySelector("#form-errors").textContent = errors.join(" ");
});

Code exercise · javascript

The validate function is pure logic, no browser needed, so run the real thing right here. It reuses looksLikeEmail from lesson 3-1 and returns an array of error messages, empty when everything passes. (JSON.stringify prints the array in a stable one-line format.)

Code exercise · javascript

Your turn: add one more rule to validate. The password must contain at least one digit (0 to 9). Push the message "Password needs a number." when it does not. Keep the existing rules unchanged.

Wire it all together live. The HTML and CSS are done, and validate is already in the JS pane. Add the submit listener: select the form, call event.preventDefault(), collect the three field values, run validate, and write errors.join(" ") into the #form-errors paragraph (or the text All good! when the array is empty). Then try submitting bad and good data.

Quiz

Why does the form carry the novalidate attribute?

You built the whole thing

Walk the finished page top to bottom and every line is yours: the semantic skeleton (units 2 and 3), cascade-friendly class styling with hover and focus states (unit 4), border-box layout math and positioning (unit 5), a flex header and hero (unit 6), a responsive card grid (unit 7), DOM wiring, events, and elements built from data (unit 8), and DevTools for when it misbehaves (lesson 9-1).

Where to go next:

Rebuild a real page you admire (a pricing page, a docs page) from a blank file, no peeking until you are stuck.
Push the DOM further: a to-do list, tabs, a modal. Each is one afternoon with querySelector plus events.
Then a framework like React will make sense quickly, because it generates the same HTML, CSS, and DOM you now read fluently.

Problem

Final check. In the submit listener, which method call stops the browser's page-reloading form submission?