Forms: Reading Input and Validating

Forms are how your site listens. You know the HTML (Module 2) and events (last lesson) — now you read what the user typed and check it.

Reading values

const emailField = document.querySelector("#email");

emailField.value; // the current text — a string, always

.value works on inputs, textareas, and selects. It is always a string: "25" is not a number — convert with Number(...) when you do math.

Two layers of validation

Layer 1 — the browser (free): with <input type="email" required minlength="3">, the browser refuses to submit invalid data and shows a message. Always start here.

Layer 2 — your JavaScript: the browser can't know your business rules ("name taken", "username must not contain spaces"). Handle the submit and check yourself:

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

form.addEventListener("submit", (event) => {
  event.preventDefault();

  const username = document.querySelector("#username").value.trim();

  if (username.length < 3) {
    errorBox.textContent = "Username must be at least 3 characters.";
    return; // stop — don't accept the bad input
  }

  errorBox.textContent = ""; // clear old errors
  console.log("Welcome, " + username);
});

Feedback that includes everyone

• Show errors in text on the page (color alone fails ~8% of men — colorblind users can't see "the red border").
• Put the message near the field it belongs to.
• .trim() before checking: " " is not a real name even though it is not empty.

The pattern, generalized

1. Intercept submit → preventDefault()
2. Read + normalize values
3. Check each rule; on first failure, show a message and stop
4. All good → do the real work (save, send, render)

This read → validate → feedback loop is unchanged in every framework.

What you learned

• .value reads fields; it is always a string (Number() to convert)
• Validate in layers: HTML attributes first, JavaScript for your rules
• Show errors as text near the field; never color alone
• Intercept, read, check, feedback — in that order

Next: remembering data between visits — storage.