Validate a library request

A library holds books for readers. Give its request form a blank-field message and a successful confirmation without sending the browser away. In the preceding demo, you saw the complete behavior before having to build it yourself.

Transfer the pattern

The previous preview reacted on every edit. A request is different: it should confirm only when the visitor submits, whether by button or by pressing Enter in the field.

The form’s submit event also fires when a user presses Enter. Call event.preventDefault() to stop navigation, then inspect .value.trim(); show an error in a visible status region and associate it with the field through aria-describedby. Focus the invalid field so the person can correct it.

For a different form, validation can stay in one submit handler:

const signup = document.querySelector("#newsletter");
const email = document.querySelector("#email");
const notice = document.querySelector("#notice");
signup.addEventListener("submit", (event) => {
  event.preventDefault();
  notice.textContent = email.value.trim() ? "Subscribed!" : "Enter an email.";
});

That example is deliberately small: your library request also needs a connected error description, focus on failure, and clearing the invalid state after correction.

Run the starter first to see what is present and what still does nothing. Edit script.js and, if needed, the markup; use the Preview for a visible check before Submit. The checks exercise actions and state changes, not just the initial markup.