Form Validation

			<!-- The browser checks these attributes before it lets the form submit. -->
			<form class="signup" id="signup">
				<h1 class="signup-title">Create an account</h1>

				<div class="field">
					<label for="name">Full name</label>
					<!-- required: the form won't submit while this is empty. -->
					<input id="name" name="name" type="text" autocomplete="name" required />
				</div>

				<div class="field">
					<label for="email">Email</label>
					<!-- type="email" also checks it looks like an email address. -->
					<input
						id="email"
						name="email"
						type="email"
						autocomplete="email"
						required
					/>
				</div>

				<div class="field">
					<label for="password">Password</label>
					<!-- The hint is read with the field, so everyone knows the rules first. -->
					<p class="hint" id="password-hint">
						At least 8 characters, including a number.
					</p>
					<!-- minlength counts characters; pattern needs a digit somewhere. -->
					<input
						id="password"
						name="password"
						type="password"
						autocomplete="new-password"
						minlength="8"
						pattern=".*\d.*"
						aria-describedby="password-hint"
						required
					/>
				</div>

			<!-- tabindex="-1" lets JavaScript move focus here once it's shown. -->
			<div class="success" id="success" tabindex="-1" hidden>
				<h1 class="signup-title">You're signed up!</h1>
				<p>Check your inbox for a welcome email.</p>
			</div>

/* :user-invalid waits until a field is used; :invalid would flag it at once. */
.field input:user-invalid {
	border-color: #b91c1c;
}

// "submit" only fires once every field passes the browser's checks.
form.addEventListener("submit", (event) => {
	// Stop the page reloading; a real site would send the data here.
	event.preventDefault();
	form.hidden = true;
	successMessage.hidden = false;
	// Move focus to the message, so screen readers announce it.
	successMessage.focus();
});

			<!-- novalidate turns off the browser's bubbles; JavaScript checks instead. -->
			<form class="signup" id="signup" novalidate>

				<div class="field">
					<label for="name">Full name</label>
					<!-- aria-describedby reads the error out with the field. -->
					<input
						id="name"
						name="name"
						type="text"
						autocomplete="name"
						aria-describedby="name-error"
					/>
					<!-- Empty until there's a problem with the field. -->
					<p class="error" id="name-error"></p>
				</div>

				<div class="field">
					<label for="password">Password</label>
					<p class="hint" id="password-hint">
						At least 8 characters, including a number.
					</p>
					<!-- Two ids: the hint and the error are both read with the field. -->
					<input
						id="password"
						name="password"
						type="password"
						autocomplete="new-password"
						aria-describedby="password-hint password-error"
					/>
					<p class="error" id="password-error"></p>
				</div>

/* JavaScript sets aria-invalid, and the same attribute styles the field. */
.field input[aria-invalid="true"] {
	border-color: #b91c1c;
}

/* Empty errors take no space; a message pushes the next field down. */
.error {
	margin: 0.375rem 0 0;
	font-size: 0.875rem;
	color: #b91c1c;
}

.error:empty {
	display: none;
}

// One rule per field, by its name. Each returns an error message, or ""
// when the value is fine.
const rules = {
	name: (input) => (input.value.trim() ? "" : "Enter your full name."),
	email: (input) => {
		if (!input.value) return "Enter your email address.";
		// validity still checks type="email" for us, even with novalidate.
		if (input.validity.typeMismatch) {
			return "Enter an email address like name@example.com.";
		}
		return "";
	},
	password: (input) => {
		if (input.value.length < 8) return "Use at least 8 characters.";
		// A regular expression: \d matches any digit.
		if (!/\d/.test(input.value)) return "Include at least one number.";
		return "";
	},
	confirm: (input) => {
		if (!input.value) return "Type your password again.";
		if (input.value !== passwordInput.value) return "The passwords don't match.";
		return "";
	},
};

	email: (input) => {
		if (!input.value) return "Enter your email address.";
		// validity still checks type="email" for us, even with novalidate.
		if (input.validity.typeMismatch) {
			return "Enter an email address like name@example.com.";
		}
		return "";
	},

	password: (input) => {
		if (input.value.length < 8) return "Use at least 8 characters.";
		// A regular expression: \d matches any digit.
		if (!/\d/.test(input.value)) return "Include at least one number.";
		return "";
	},

// Check one field, show or clear its message, and say whether it passed.
function validate(input) {
	const message = rules[input.name](input);
	document.querySelector(`#${input.id}-error`).textContent = message;
	// aria-invalid tells screen readers the field has a problem.
	input.setAttribute("aria-invalid", message ? "true" : "false");
	return message === "";
}

inputs.forEach((input) => {
	// Check when someone leaves a field they've typed in, not while typing.
	input.addEventListener("blur", () => {
		if (input.value) validate(input);
	});
	// Once a field has an error, re-check as they type, so it clears at once.
	input.addEventListener("input", () => {
		if (input.getAttribute("aria-invalid") === "true") validate(input);
	});
});

form.addEventListener("submit", (event) => {
	event.preventDefault();

	// map checks every field, so all the errors show at once, not just one.
	const results = [...inputs].map(validate);
	if (results.includes(false)) {
		// Take keyboard and screen reader users straight to the first problem.
		form.querySelector('[aria-invalid="true"]').focus();
		return;
	}

	form.hidden = true;
	successMessage.hidden = false;
	successMessage.focus();
});