Forms & Validation

A form is more than a button

A form groups fields and supports submission with Enter as well as a button click. Listen for the form’s submit event, not just the button’s click. Call event.preventDefault() to stop the default navigation so your JavaScript can handle this local demo.

A label connected to the input’s id tells people what to enter and makes the field easier to use. The input’s value is text—even when its type is number. Convert and validate it before updating state. Native constraints such as required and min help the browser guide users; JavaScript still needs rules for its own data.

Read the form’s HTML

The input object’s .value property reads what the person typed as a string. In form.addEventListener("submit", event => { ... }), event is a parameter name: the browser supplies an event object when it calls the handler. .preventDefault() is a method of that object, not a function you must define.

The callback uses an arrow with a block because it has several instructions. Its job is to perform the submission steps, so it does not need to return a new value to the browser. The variables form, input, total, and feedback hold elements found by querySelector, not your numeric application data.

Trace a submission

1. Read the text from the field.
2. Validate and convert it.
3. If invalid, show a specific message and leave state unchanged.
4. Otherwise update state and display the new result.

The lab uses novalidate so you can observe every JavaScript validation branch. It is a deliberate teaching choice, not a requirement for real forms. The message has role=status so assistive technology can announce updates.

Try 25, blank text, 0, 240, 241, and 1.5. Submit once by clicking and once by pressing Enter. After a rejection, confirm the previous valid total remains. Change the success wording, run your edited page, and check again. Run webpage resets this demo’s state; typing in the source does not update the preview until you run it.

Test the conversion separately

The validation function can be tested without the DOM. This makes failures easier to locate: is the rule wrong, or did the event handler read the wrong field?

function parseMinutes(text) {
  if (text.trim() === "") {
    return null;
  }

  const value = Number(text);

  return Number.isInteger(value) && value >= 1 && value <= 240 ? value : null;
}

console.log(parseMinutes("25"));
console.log(parseMinutes(""));
console.log(parseMinutes("241"));

25
null
null

let current = 10;
// Apply 30, then attempt 0.

let current = 10;

for (const candidate of [30, 0]) {
  if (Number.isInteger(candidate) && candidate >= 1 && candidate <= 240) {
    current = candidate;
  }

  console.log(current);
}

30
30

Before the complete app

Can you explain why Enter works? Why does invalid input leave state alone? Add a reset button to your copy of the lab using type=button so it does not accidentally submit. Reset both the numeric state and visible message, then test another submission.