Тренажёр HTML-форм и валидации

<form id="learning-form">
<div id="form-errors" role="alert" tabindex="-1" hidden></div>
<div class="form-field" data-field="field-1">
<label for="field-1">Электронная почта (обязательно)</label>
<input id="field-1" type="email" name="email" autocomplete="email" required aria-describedby="field-1-hint">
<small id="field-1-hint">Например, reader@example.com</small>
<p id="field-1-error" class="field-error" hidden></p>
</div>
<button type="submit">Пробная отправка</button>
<button type="reset">Очистить ввод</button>
<p id="form-result" role="status"></p>
</form>

:root { color-scheme: light dark; }
body { margin: 16px; font: 16px/1.5 system-ui, sans-serif; }
form { max-width: 680px; }
.form-field { margin-block: 12px; min-width: 0; }
label, small { display: block; }
input:not([type="checkbox"]):not([type="radio"]), select, textarea { max-width: 100%; box-sizing: border-box; }
input[type="checkbox"] + label, input[type="radio"] + label { display: inline; }
fieldset { min-width: 0; }
.field-error { color: light-dark(#a12622, #ffb0aa); }
#form-errors { border: 2px solid light-dark(#a12622, #ffb0aa); padding: 12px; margin-bottom: 16px; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid light-dark(#1759a2, #8ecaff); outline-offset: 3px; }

// Учебная отправка перехватывается: сервер не используется.
function bindLearningForm(doc, customErrors = {}, changed = () => void 0) {
	const form = doc.querySelector("#learning-form");
	const summary = doc.querySelector("#form-errors");
	const status = doc.querySelector("#form-result");
	const touched = /* @__PURE__ */ new Set();
	let submitted = false;
	let requested = false;
	const controls = () => [...doc.querySelectorAll("input, select, textarea")];
	function message(control) {
		const v = control.validity;
		if (!control.willValidate || v.valid) return "";
		if (v.customError) return control.validationMessage;
		if (v.valueMissing) return "Заполните поле или выберите вариант.";
		if (v.typeMismatch) return control.type === "email" ? "Введите адрес электронной почты, например reader@example.com." : "Введите полный URL, например https://example.com.";
		if (v.patternMismatch) return "Значение не соответствует шаблону pattern.";
		if (v.tooShort) return "Введите не менее " + control.getAttribute("minlength") + " символов.";
		if (v.tooLong) return "Введите не более " + control.getAttribute("maxlength") + " символов.";
		if (v.rangeUnderflow) return "Значение должно быть не меньше " + control.getAttribute("min") + ".";
		if (v.rangeOverflow) return "Значение должно быть не больше " + control.getAttribute("max") + ".";
		if (v.stepMismatch) return "Значение не попадает в шаг step от базы (min, начальное value или 0).";
		if (v.badInput) return "Браузер не может преобразовать ввод в значение этого типа.";
		return control.validationMessage;
	}
	function render(focus = false) {
		for (const input of doc.querySelectorAll("input[type=\"file\"]")) {
			const list = input.closest("[data-field]")?.querySelector("[data-file-list]");
			if (!list) continue;
			const files = [...input.files ?? []];
			const signature = files.map((file) => [
				file.name,
				file.size,
				file.type,
				file.lastModified
			].join(":")).join("|");
			if (list.dataset.files === signature) continue;
			list.dataset.files = signature;
			list.replaceChildren();
			if (!files.length) {
				list.textContent = "Файлы не выбраны.";
				continue;
			}
			const heading = doc.createElement("p");
			heading.textContent = "Выбрано файлов: " + files.length;
			const items = doc.createElement("ul");
			for (const file of files) {
				const item = doc.createElement("li");
				item.textContent = file.name + " · " + file.size + " байт · " + (file.type || "MIME-тип не указан");
				items.append(item);
			}
			list.append(heading, items);
		}
		const invalid = controls().filter((control) => control.willValidate && !control.validity.valid);
		for (const wrapper of doc.querySelectorAll("[data-field]")) {
			const local = [...wrapper.querySelectorAll("input,select,textarea")];
			const failed = local.find((control) => control.willValidate && !control.validity.valid);
			const show = !!failed && (submitted || local.some((control) => touched.has(control.id)));
			const error = wrapper.querySelector(".field-error");
			error.textContent = show ? message(failed) : "";
			error.hidden = !show;
			for (const control of local) {
				if (show) control.setAttribute("aria-invalid", "true");
				else control.removeAttribute("aria-invalid");
				const ids = [wrapper.querySelector("small")?.id, show ? error.id : ""].filter(Boolean).join(" ");
				if (ids) control.setAttribute("aria-describedby", ids);
				else control.removeAttribute("aria-describedby");
			}
		}
		summary.replaceChildren();
		summary.hidden = !submitted || invalid.length === 0;
		if (!summary.hidden) {
			const heading = doc.createElement("strong");
			heading.textContent = "Исправьте ошибки:";
			summary.append(heading);
			const list = doc.createElement("ul");
			const seen = /* @__PURE__ */ new Set();
			for (const control of invalid) {
				const wrapper = control.closest("[data-field]");
				if (seen.has(wrapper.dataset.field)) continue;
				seen.add(wrapper.dataset.field);
				const item = doc.createElement("li"), link = doc.createElement("a");
				link.href = "#" + control.id;
				link.textContent = (wrapper.querySelector("legend,label")?.textContent ?? control.name) + ": " + message(control);
				link.addEventListener("click", (event) => {
					event.preventDefault();
					control.focus();
				});
				item.append(link);
				list.append(item);
			}
			summary.append(list);
		}
		if (focus && invalid.length) invalid[0].focus();
		changed();
		return invalid.length === 0;
	}
	function setErrors(errors) {
		customErrors = errors;
		for (const control of controls()) {
			const id = control.closest("[data-field]").dataset.field;
			control.setCustomValidity(customErrors[id] ?? "");
		}
	}
	EventTarget.prototype.addEventListener.call(form, "input", (event) => {
		const control = event.target;
		if (![
			"INPUT",
			"SELECT",
			"TEXTAREA"
		].includes(control.tagName)) return;
		touched.add(control.id);
		status.textContent = "";
		render();
	});
	EventTarget.prototype.addEventListener.call(form, "change", () => render());
	EventTarget.prototype.addEventListener.call(form, "click", (event) => {
		if (event.target.closest("button[type=\"submit\"]")) requested = true;
	});
	EventTarget.prototype.addEventListener.call(form, "keydown", (event) => {
		if (event.key === "Enter" && event.target.tagName === "INPUT") requested = true;
	});
	EventTarget.prototype.addEventListener.call(form, "invalid", (event) => {
		event.preventDefault();
		if (requested) {
			submitted = true;
			queueMicrotask(() => {
				render(true);
				requested = false;
				status.textContent = "Отправка остановлена: исправьте отмеченные поля.";
			});
		}
	}, true);
	EventTarget.prototype.addEventListener.call(form, "submit", (event) => {
		event.preventDefault();
		requested = false;
		submitted = true;
		const valid = render();
		status.textContent = valid ? "Проверка пройдена. Учебная отправка перехвачена: данные никуда не отправлены." : "Novalidate пропустил встроенную проверку при отправке. Ограничения полей по-прежнему нарушены; данные никуда не отправлены.";
		changed();
	});
	EventTarget.prototype.addEventListener.call(form, "reset", () => {
		setTimeout(() => {
			touched.clear();
			submitted = false;
			requested = false;
			setErrors(customErrors);
			status.textContent = "Ввод сброшен к начальным значениям.";
			render();
		});
	});
	setErrors(customErrors);
	return {
		controls,
		message,
		refresh: () => {
			setErrors(customErrors);
			render();
		},
		setErrors,
		check: () => {
			submitted = true;
			const valid = render(true);
			status.textContent = valid ? "Все проверяемые поля корректны." : "Есть ошибки. Первое ошибочное поле получило фокус.";
			return valid;
		},
		clear: () => {
			submitted = false;
			touched.clear();
			status.textContent = "";
			render();
		}
	};
}

(bindLearningForm)(document, {});

<form id="learning-form">
<div id="form-errors" role="alert" tabindex="-1" hidden></div>
<div class="form-field" data-field="field-1">
<label for="field-1">Почта</label>
<input id="field-1" type="text" name="email">
<p id="field-1-error" class="field-error" hidden></p>
</div>
<button type="submit">Пробная отправка</button>
<button type="reset">Очистить ввод</button>
<p id="form-result" role="status"></p>
</form>

:root { color-scheme: light dark; }
body { margin: 16px; font: 16px/1.5 system-ui, sans-serif; }
form { max-width: 680px; }
.form-field { margin-block: 12px; min-width: 0; }
label, small { display: block; }
input:not([type="checkbox"]):not([type="radio"]), select, textarea { max-width: 100%; box-sizing: border-box; }
input[type="checkbox"] + label, input[type="radio"] + label { display: inline; }
fieldset { min-width: 0; }
.field-error { color: light-dark(#a12622, #ffb0aa); }
#form-errors { border: 2px solid light-dark(#a12622, #ffb0aa); padding: 12px; margin-bottom: 16px; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid light-dark(#1759a2, #8ecaff); outline-offset: 3px; }

// Учебная отправка перехватывается: сервер не используется.
function bindLearningForm(doc, customErrors = {}, changed = () => void 0) {
	const form = doc.querySelector("#learning-form");
	const summary = doc.querySelector("#form-errors");
	const status = doc.querySelector("#form-result");
	const touched = /* @__PURE__ */ new Set();
	let submitted = false;
	let requested = false;
	const controls = () => [...doc.querySelectorAll("input, select, textarea")];
	function message(control) {
		const v = control.validity;
		if (!control.willValidate || v.valid) return "";
		if (v.customError) return control.validationMessage;
		if (v.valueMissing) return "Заполните поле или выберите вариант.";
		if (v.typeMismatch) return control.type === "email" ? "Введите адрес электронной почты, например reader@example.com." : "Введите полный URL, например https://example.com.";
		if (v.patternMismatch) return "Значение не соответствует шаблону pattern.";
		if (v.tooShort) return "Введите не менее " + control.getAttribute("minlength") + " символов.";
		if (v.tooLong) return "Введите не более " + control.getAttribute("maxlength") + " символов.";
		if (v.rangeUnderflow) return "Значение должно быть не меньше " + control.getAttribute("min") + ".";
		if (v.rangeOverflow) return "Значение должно быть не больше " + control.getAttribute("max") + ".";
		if (v.stepMismatch) return "Значение не попадает в шаг step от базы (min, начальное value или 0).";
		if (v.badInput) return "Браузер не может преобразовать ввод в значение этого типа.";
		return control.validationMessage;
	}
	function render(focus = false) {
		for (const input of doc.querySelectorAll("input[type=\"file\"]")) {
			const list = input.closest("[data-field]")?.querySelector("[data-file-list]");
			if (!list) continue;
			const files = [...input.files ?? []];
			const signature = files.map((file) => [
				file.name,
				file.size,
				file.type,
				file.lastModified
			].join(":")).join("|");
			if (list.dataset.files === signature) continue;
			list.dataset.files = signature;
			list.replaceChildren();
			if (!files.length) {
				list.textContent = "Файлы не выбраны.";
				continue;
			}
			const heading = doc.createElement("p");
			heading.textContent = "Выбрано файлов: " + files.length;
			const items = doc.createElement("ul");
			for (const file of files) {
				const item = doc.createElement("li");
				item.textContent = file.name + " · " + file.size + " байт · " + (file.type || "MIME-тип не указан");
				items.append(item);
			}
			list.append(heading, items);
		}
		const invalid = controls().filter((control) => control.willValidate && !control.validity.valid);
		for (const wrapper of doc.querySelectorAll("[data-field]")) {
			const local = [...wrapper.querySelectorAll("input,select,textarea")];
			const failed = local.find((control) => control.willValidate && !control.validity.valid);
			const show = !!failed && (submitted || local.some((control) => touched.has(control.id)));
			const error = wrapper.querySelector(".field-error");
			error.textContent = show ? message(failed) : "";
			error.hidden = !show;
			for (const control of local) {
				if (show) control.setAttribute("aria-invalid", "true");
				else control.removeAttribute("aria-invalid");
				const ids = [wrapper.querySelector("small")?.id, show ? error.id : ""].filter(Boolean).join(" ");
				if (ids) control.setAttribute("aria-describedby", ids);
				else control.removeAttribute("aria-describedby");
			}
		}
		summary.replaceChildren();
		summary.hidden = !submitted || invalid.length === 0;
		if (!summary.hidden) {
			const heading = doc.createElement("strong");
			heading.textContent = "Исправьте ошибки:";
			summary.append(heading);
			const list = doc.createElement("ul");
			const seen = /* @__PURE__ */ new Set();
			for (const control of invalid) {
				const wrapper = control.closest("[data-field]");
				if (seen.has(wrapper.dataset.field)) continue;
				seen.add(wrapper.dataset.field);
				const item = doc.createElement("li"), link = doc.createElement("a");
				link.href = "#" + control.id;
				link.textContent = (wrapper.querySelector("legend,label")?.textContent ?? control.name) + ": " + message(control);
				link.addEventListener("click", (event) => {
					event.preventDefault();
					control.focus();
				});
				item.append(link);
				list.append(item);
			}
			summary.append(list);
		}
		if (focus && invalid.length) invalid[0].focus();
		changed();
		return invalid.length === 0;
	}
	function setErrors(errors) {
		customErrors = errors;
		for (const control of controls()) {
			const id = control.closest("[data-field]").dataset.field;
			control.setCustomValidity(customErrors[id] ?? "");
		}
	}
	EventTarget.prototype.addEventListener.call(form, "input", (event) => {
		const control = event.target;
		if (![
			"INPUT",
			"SELECT",
			"TEXTAREA"
		].includes(control.tagName)) return;
		touched.add(control.id);
		status.textContent = "";
		render();
	});
	EventTarget.prototype.addEventListener.call(form, "change", () => render());
	EventTarget.prototype.addEventListener.call(form, "click", (event) => {
		if (event.target.closest("button[type=\"submit\"]")) requested = true;
	});
	EventTarget.prototype.addEventListener.call(form, "keydown", (event) => {
		if (event.key === "Enter" && event.target.tagName === "INPUT") requested = true;
	});
	EventTarget.prototype.addEventListener.call(form, "invalid", (event) => {
		event.preventDefault();
		if (requested) {
			submitted = true;
			queueMicrotask(() => {
				render(true);
				requested = false;
				status.textContent = "Отправка остановлена: исправьте отмеченные поля.";
			});
		}
	}, true);
	EventTarget.prototype.addEventListener.call(form, "submit", (event) => {
		event.preventDefault();
		requested = false;
		submitted = true;
		const valid = render();
		status.textContent = valid ? "Проверка пройдена. Учебная отправка перехвачена: данные никуда не отправлены." : "Novalidate пропустил встроенную проверку при отправке. Ограничения полей по-прежнему нарушены; данные никуда не отправлены.";
		changed();
	});
	EventTarget.prototype.addEventListener.call(form, "reset", () => {
		setTimeout(() => {
			touched.clear();
			submitted = false;
			requested = false;
			setErrors(customErrors);
			status.textContent = "Ввод сброшен к начальным значениям.";
			render();
		});
	});
	setErrors(customErrors);
	return {
		controls,
		message,
		refresh: () => {
			setErrors(customErrors);
			render();
		},
		setErrors,
		check: () => {
			submitted = true;
			const valid = render(true);
			status.textContent = valid ? "Все проверяемые поля корректны." : "Есть ошибки. Первое ошибочное поле получило фокус.";
			return valid;
		},
		clear: () => {
			submitted = false;
			touched.clear();
			status.textContent = "";
			render();
		}
	};
}

(bindLearningForm)(document, {});