Pocket needs a way to add expenses that is not a “sample” button: a form with a label, an amount and a category. Forms look simple and are where many real bugs live, because they sit on the border between people, who type anything, and your code, which expects clean data.
\nStart with proper HTML. Every input has a <label>, and the button is a submit button inside the <form>:
<form id=\"expense-form\" novalidate>\n <label for=\"label\">What</label>\n <input id=\"label\" name=\"label\" required>\n\n <label for=\"amount\">Amount ($)</label>\n <input id=\"amount\" name=\"amount\" type=\"number\" step=\"0.01\" min=\"0.01\" required>\n\n <label for=\"category\">Category</label>\n <select id=\"category\" name=\"category\">\n <option value=\"food\">Food</option>\n <option value=\"travel\">Travel</option>\n <option value=\"fun\">Fun</option>\n </select>\n\n <p id=\"form-error\" class=\"error\" role=\"alert\"></p>\n <button type=\"submit\">Add expense</button>\n</form>A form can be submitted by clicking the button, by pressing Enter in a field, or by assistive technology. All of these fire one event on the form: submit. Listen to that, not to the button’s click:
const form = document.querySelector(\"#expense-form\");\n\nform.addEventListener(\"submit\", (event) => {\n event.preventDefault();\n // read, validate, add, render\n});The browser’s default reaction to a submit is to send the data to a server and load a new page. For an app that runs in the page, that reload wipes out everything. event.preventDefault() cancels the default and keeps you on the page.
You can read each field’s value, or collect them all at once with FormData, which uses each field’s name attribute:
const data = new FormData(form);\nconst rawLabel = data.get(\"label\"); // \" Coffee with Sam \"\nconst rawAmount = data.get(\"amount\"); // \"4.50\": a string!\nconst category = data.get(\"category\"); // \"food\"Every value is a string, even from a number input. This is the “typed input” problem from section 1, now for real. Clean the values up immediately: trim() the label, and convert the amount once, into cents:
const label = rawLabel.trim();\nconst amount = Math.round(Number(rawAmount) * 100);Put the rules in one function that takes values and returns what is wrong with them. It does not touch the page, so it is easy to read and easy to test:
\nfunction validateExpense({ label, amount }) {\n const errors = {};\n if (label.trim() === \"\") {\n errors.label = \"Enter what you spent money on.\";\n }\n if (!Number.isFinite(amount) || amount <= 0) {\n errors.amount = \"Enter an amount greater than zero.\";\n }\n return errors;\n}\n\nconsole.log(validateExpense({ label: \" \", amount: Number(\"\") }));\nconsole.log(validateExpense({ label: \"Coffee\", amount: 4.5 }));An empty object means “valid”, which you test with Object.keys(errors).length === 0. Notice Number("") is 0, the empty-input trap from section 1, so “nothing typed” correctly fails the amount <= 0 rule, and Number.isFinite rejects NaN and Infinity in one check.
form.addEventListener(\"submit\", (event) => {\n event.preventDefault();\n const data = new FormData(form);\n const values = {\n label: data.get(\"label\").trim(),\n amount: Math.round(Number(data.get(\"amount\")) * 100),\n category: data.get(\"category\"),\n };\n\n const errors = validateExpense(values);\n const errorEl = document.querySelector(\"#form-error\");\n if (Object.keys(errors).length > 0) {\n errorEl.textContent = Object.values(errors).join(\" \");\n const firstBad = form.elements[Object.keys(errors)[0]];\n firstBad.setAttribute(\"aria-invalid\", \"true\");\n firstBad.focus();\n return;\n }\n\n errorEl.textContent = \"\";\n expenses = [...expenses, { id: nextId(), ...values }];\n renderExpenses();\n form.reset();\n form.elements.label.focus();\n});On failure, the message goes in an element with role="alert", which screen readers announce as soon as its text changes; the first invalid field is marked with aria-invalid and receives focus, so the user can fix it straight away. On success, the data changes, the list re-renders, form.reset() empties the fields, and focus returns to the first field, ready for the next expense. A real app would also clear aria-invalid once a field is fixed. form.elements.label looks up a field by its name.
Showing an error is half the job; the other half is taking it away at the right moment. If the message stays on screen while the user is already typing the fix, the form feels like it is scolding them. Listen for input events on the form (they bubble, so one listener covers every field) and clear the error state of whichever field changed:
form.addEventListener(\"input\", (event) => {\n event.target.removeAttribute(\"aria-invalid\");\n document.querySelector(\"#form-error\").textContent = \"\";\n});Resist the opposite urge, validating every keystroke and showing “Enter an amount” while someone is halfway through typing it. A good default: validate on submit, clear on input.
\nThe required, type="number", min and step attributes let the browser check basic rules and show its own messages. The novalidate attribute on the form above turns those messages off so yours are shown consistently, while the attributes still document intent and give phones the right keyboard. You can also ask the browser directly with form.checkValidity().
Your form now adds real expenses. Reload the page, though, and they are gone, because they only ever lived in a variable. Next lesson fixes that with JSON and localStorage.
submit on the form, not click on the button, so every way of submitting (button, Enter key, assistive technology) runs your code, and call event.preventDefault() to stop the page reloading.","Every value read from a form is a string; trim text and convert numbers before using them.","Keep validation in a pure function that takes values and returns errors, so the rules are easy to read and test.","HTML attributes such as required and min are a useful first layer, but your JavaScript must still validate, and the server must too.","Show errors next to the field, mark it with aria-invalid, and move focus so keyboard and screen-reader users notice."],"further":[{"title":"Client-side form validation (MDN)","url":"https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/Form_validation"},{"title":"FormData (MDN)","url":"https://developer.mozilla.org/en-US/docs/Web/API/FormData"},{"title":"HTMLFormElement: submit event (MDN)","url":"https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/submit_event"}],"quiz":[{"q":"You attach your “add expense” logic to the Save button’s click event. What breaks?
form.requestSubmit(), by some assistive technology, or by Enter in a form with no submit button, and a click handler does not cancel the native submission. Listening for submit on the form catches every path, and preventDefault() there stops the reload."},{"text":"Nothing; click and submit are interchangeable.","why":"They are different events. submit fires on the form however it is submitted; a click on the button is only one of the ways a submission can start."},{"text":"The button can no longer be focused with the keyboard.","why":"Adding a listener does not change focus behaviour. The problem is the submission path you are not handling."}],"answer":0},{"q":"A number input contains 12.50. What is input.value?
12.5.","why":"Even for type="number", value is always a string. Use Number(input.value) or input.valueAsNumber."},{"text":"The string "12.50".","why":"Correct. Form values are strings, so convert before doing maths, or + will join text."},{"text":"NaN, until the form is submitted.","why":"The value is available at any time, and it is the text in the field, not NaN."}],"answer":1},{"q":"Your form has required and min="0.01" on the amount field. Why validate again in JavaScript?
Make Pocket’s form add expenses safely.
\nvalidateExpense({ label, amount }). It returns an object with a label message when the label is empty or only spaces, and an amount message when the amount is not a finite number greater than 0. Valid values give {}.#form-error, set aria-invalid="true" on the first invalid field and add nothing.#form-error and reset the form.event.preventDefault();.","data.get("amount") is a string. Math.round(Number(data.get("amount")) * 100) gives cents; Number("") is 0, which your amount rule rejects.","After validating: const names = Object.keys(errors);. If names.length > 0, show the messages, use form.elements[names[0]].setAttribute("aria-invalid", "true") and return. Otherwise add, render, form.reset()."],"explanation":"preventDefault() cancels the browser’s own submission so the page stays put. The handler converts at the border: the label is trimmed and the amount becomes whole cents straight away, so everything after that line works with clean data. validateExpense is a pure function: values in, error messages out, nothing on the page touched, which is why the first check can call it directly. The handler only decides what to show. Returning early on errors keeps the success path flat and readable, and form.reset() plus clearing the message gets the form ready for the next expense. Clearing aria-invalid at the start of each submit means a fixed field stops being announced as invalid.
validateExpense returns the right messages, and {} for valid values","empty-blocked":"An empty form shows an error, marks the label field invalid and adds nothing","prevents-default":"The submit handler calls preventDefault()","adds-valid":"A valid entry is added with a trimmed label and the amount in cents","resets":"After a successful add, the form and error message are cleared"}},"words":698,"readMinutes":3}