Read a whole form at once
Reading fields one by one gets tedious. FormData grabs every named field in one go, and the browser's validation API lets JavaScript check fields and show friendly, custom messages.
FormData and validity
const form = document.querySelector("form");
const out = document.querySelector("#out");
const email = form.elements.email;
email.addEventListener("input", () => {
email.setCustomValidity(email.value.endsWith(".np") ? "" : "Please use a .np address");
});
form.addEventListener("submit", (event) => {
event.preventDefault();
if (!form.checkValidity()) {
form.reportValidity();
return;
}
const data = Object.fromEntries(new FormData(form));
out.textContent = JSON.stringify(data);
});