The request
"When something is wrong, tell me what to fix." A red border alone does not answer this. Identify which field failed, why it failed and what input is accepted.
Create a label and a persistent hint/error element for quantity. For example, an input with id quantity, name quantity and aria-describedby quantity-help. Put the message in a paragraph with id quantity-help. Keep the label visible; placeholder text is not a replacement.
export function setFieldIssue(input, messageElement, issue) {
if (issue) {
input.setAttribute('aria-invalid', 'true');
messageElement.textContent = issue;
} else {
input.removeAttribute('aria-invalid');
messageElement.textContent = 'Use a positive whole number.';
}
}
The function assumes the HTML association already exists. It does not automatically create a label or decide which rule applies. Use textContent to avoid interpreting messages as markup.
Native and custom validation
Required, min and step can express useful constraints for appropriate control types. Native validation can prevent the submit event from reaching your handler when constraints fail. If you choose novalidate for a fully custom workflow, you must implement the messages and focus behavior yourself. Do not disable native validation and then forget to provide an alternative.
For this lab, use one consistent custom submit path so parsing examples are predictable. Do not mark every untouched field invalid on initial load.
Build the recovery path
On submission, collect all field issues. Show a concise summary, keep every typed value, hide a previous successful quote, then focus the first invalid input or an error summary with links to the fields. Choose one strategy and test it. Do not focus the same element repeatedly while someone types.
An inactive customer is a business rejection rather than a malformed number. Display that explanation in the quote result region; changing the numeric format cannot resolve it.
Independent exercise
Submit an empty customer name and fractional quantity. Correct only the name and submit again. Which issue should remain? Then correct quantity and verify the error state is cleared.
Correction criteria
Only the unresolved quantity issue remains after the second submit. Inputs are preserved. Focus moves predictably after a failed submit. A successful quote does not retain aria-invalid or an old failure summary. Add keyboard and screen-reader checks where available; markup alone is not proof of accessibility.
Reading
W3C's form notification guidance explains associating messages with fields and making errors understandable. Use it to review your choices rather than adding ARIA attributes without a purpose.