Формы и валидация

01 Форма и её поля: value и checked

Форма в HTML — это тег <form>, внутри которого лежат поля ввода: <input>, <select>, <textarea> и кнопка отправки. Вёрстку вы уже знаете — сегодня нас интересует, как достать из этих полей данные с помощью JavaScript.

Как найти поле

Каждое поле можно найти через querySelector, но у формы есть удобный путь — коллекция form.elements. В ней поля доступны по атрибуту name:

<form id="reg">
  <label>Имя <input name="fullName" value="Мадина"></label>
  <label>Возраст <input name="age" type="number" value="19"></label>
  <label>Город
    <select name="city">
      <option value="dushanbe">Душанбе</option>
      <option value="khujand">Худжанд</option>
    </select>
  </label>
  <label><input type="checkbox" name="agree"> Согласен с правилами</label>
  <button type="button" id="show">Показать значения</button>
</form>

form { display: grid; gap: 10px; max-width: 320px; }
label { display: grid; gap: 4px; font-size: 14px; }
input, select, button { padding: 6px 8px; font: inherit; }
label:has(input[type="checkbox"]) { display: flex; align-items: center; gap: 8px; }

const form = document.querySelector("#reg");

document.querySelector("#show").addEventListener("click", () => {
  console.log("fullName:", form.elements.fullName.value);
  console.log("age:", form.elements.age.value, typeof form.elements.age.value);
  console.log("city:", form.elements.city.value);
  console.log("agree:", form.elements.agree.checked);
});

Запустите, поменяйте что-нибудь в превью (введите другое имя, поставьте галочку) и нажмите «Показать значения». Вот что и откуда мы читаем:

Главная ловушка: value — всегда строка

Даже у type="number" значение приходит строкой. Это та самая история с приведением типов из урока 2:

document.body.innerHTML = `
  <input name="plov" type="number" value="40">
  <input name="tea" type="number" value="10">`;

const plov = document.querySelector("[name=plov]").value;
const tea = document.querySelector("[name=tea]").value;

console.log(plov + tea);                   // "4010" — склеились как строки!
console.log(Number(plov) + Number(tea));   // 50 — сначала превращаем в числа
console.log(document.querySelector("[name=plov]").valueAsNumber); // 40 — число сразу

Атрибуты name, label и type

• name — «имя поля». Через него мы находим поле в form.elements, и именно по нему данные попадают в FormData (раздел 3). Без name поле «невидимо» для формы.
• <label> — подпись. Оберните в неё поле или свяжите через for и id: тогда клик по тексту ставит курсор в поле, а экранные читалки понимают, что за поле перед ними.
• type — подсказывает браузеру, какую клавиатуру показать на телефоне (tel — цифровую, email — с «@») и какие проверки включить.

Читать подробнее: Свойства и методы формы · MDN: элемент input

document.body.innerHTML = `
  <form>
    <input name="fullName" value="Мадина Каримова">
    <input name="city" value="Душанбе">
    <input name="course" value="Frontend + AI">
  </form>`;

const form = document.querySelector("form");

// выведите три строки через console.log и form.elements

Имя: Мадина Каримова
Город: Душанбе
Курс: Frontend + AI

document.body.innerHTML = `
  <form>
    <input name="plov" type="number" value="40">
    <input name="tea" type="number" value="10">
  </form>`;

const form = document.querySelector("form");
const plov = form.elements.plov.value;
const tea = form.elements.tea.value;

console.log("Итого:", plov + tea);
console.log("Со скидкой 10%:", (plov + tea) * 0.9);

Итого: 50
Со скидкой 10%: 45

document.body.innerHTML = `
  <form>
    <select name="course">
      <option value="html">HTML и CSS</option>
      <option value="js" selected>JavaScript</option>
    </select>
    <input type="radio" name="format" value="offline">
    <input type="radio" name="format" value="online" checked>
    <input type="checkbox" name="agree" checked>
    <input type="checkbox" name="news">
  </form>`;

const form = document.querySelector("form");

// Курс: ...  Формат: ...  Согласие: ...  Рассылка: ...

Курс: js
Формат: online
Согласие: true
Рассылка: false

02 Отправка формы: событие submit

Когда человек нажимает кнопку «Отправить» или жмёт Enter в текстовом поле, форма генерирует событие submit. Если ничего не делать, браузер отправит данные на сервер и перезагрузит страницу — все введённые данные и вся ваша JS-логика пропадут. Поэтому первая строка любого обработчика отправки — event.preventDefault() (вы знаете это из урока 9).

document.body.innerHTML = `
  <form id="order">
    <input name="dish" value="Оши палав">
    <input name="qty" type="number" value="2">
    <button>Заказать</button>
  </form>`;

const form = document.querySelector("#order");

form.addEventListener("submit", (event) => {
  event.preventDefault();                       // не даём странице перезагрузиться
  const dish = form.elements.dish.value;        // читаем значения ВНУТРИ обработчика
  const qty = Number(form.elements.qty.value);
  console.log(`Заказ принят: ${dish} × ${qty}`);
});

form.dispatchEvent(new Event("submit", { cancelable: true }));   // имитируем нажатие кнопки «Заказать»

Слушаем submit, а не click

button.addEventListener("click", () => {
  // Enter в поле сюда не попадёт
});

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

Полезные детали

event.target

В событии submit это сама форма. Значит, поля можно взять как event.target.elements.email — обработчик не зависит от переменной снаружи.

form.reset()

Возвращает все поля к начальным значениям (тем, что записаны в атрибутах value / checked, или пустым). Вызываем после успешной отправки.

form.dispatchEvent(new Event("submit", { cancelable: true }))

Вручную «стреляет» событием submit. Так мы имитируем нажатие «Отправить» в примерах и задачах: учебная песочница блокирует настоящую отправку форм, поэтому обычный form.requestSubmit() (он нажимает кнопку сам) здесь не сработает. На обычном сайте вы кликаете по кнопке или вызываете именно requestSubmit().

<button type="button">

Кнопка внутри формы по умолчанию отправляет её. Если кнопка нужна для другого (например, «показать пароль»), пишите type="button".

novalidate

Атрибут формы: отключает встроенную проверку браузера, чтобы работала ваша собственная (раздел 4).

document.body.innerHTML = `<form><input name="email"></form>`;
const form = document.querySelector("form");

const email = form.elements.email.value;   // ✖ прочитали сразу — там ещё пусто

form.addEventListener("submit", (event) => {
  event.preventDefault();
  console.log("email:", "[" + email + "]");
});

form.elements.email.value = "madina@mail.tj";  // «пользователь» вписал адрес
form.dispatchEvent(new Event("submit", { cancelable: true }));                          // → email: []

Читать подробнее: Отправка формы: событие и метод submit · События change, input, cut, copy, paste

document.body.innerHTML = `
  <form>
    <input name="fullName" value="Рустам">
    <input name="phone" value="+992927771234">
  </form>`;

const form = document.querySelector("form");

// добавьте обработчик submit здесь


form.dispatchEvent(new Event("submit", { cancelable: true }));

Заявка принята: Рустам, +992927771234

document.body.innerHTML = `<form><input name="city"></form>`;
const form = document.querySelector("form");

const city = form.elements.city.value;

form.addEventListener("submit", (event) => {
  event.preventDefault();
  console.log("Город:", city);
});

form.elements.city.value = "Худжанд";   // не менять
form.dispatchEvent(new Event("submit", { cancelable: true }));                    // не менять

Город: Худжанд

document.body.innerHTML = `
  <form>
    <input name="login">
    <input name="password" type="password">
  </form>`;

const form = document.querySelector("form");

// обработчик submit


function submitWith(login, password) {
  form.elements.login.value = login;
  form.elements.password.value = password;
  form.dispatchEvent(new Event("submit", { cancelable: true }));
}

submitWith("", "12345");
submitWith("  madina  ", "");
submitWith("  madina  ", "qwerty1");

Ошибка: заполните все поля
Ошибка: заполните все поля
Вход выполнен: madina
Логин после сброса: пусто

03 FormData: собираем все поля разом

Если в форме 10 полей, читать их по одному через .value — скучно и легко что-то забыть. Для этого в браузере есть встроенный объект FormData: вы отдаёте ему форму, а он сам обходит все поля с атрибутом name и собирает их «имя → значение».

document.body.innerHTML = `
  <form>
    <input name="fullName" value="Мадина">
    <select name="city">
      <option value="dushanbe" selected>Душанбе</option>
      <option value="khujand">Худжанд</option>
    </select>
    <input type="checkbox" name="skills" value="css" checked>
    <input type="checkbox" name="skills" value="js" checked>
    <input type="checkbox" name="skills" value="git">
    <input type="checkbox" name="agree" checked>
    <input type="checkbox" name="news">
  </form>`;

const form = document.querySelector("form");
const data = new FormData(form);

console.log(data.get("fullName"));    // Мадина — одно значение по имени
console.log(data.getAll("skills"));   // ["css", "js"] — все значения одного имени
console.log(data.has("news"));        // false — чекбокс без галочки в FormData не попадает
console.log(data.get("agree"));       // "on" — у чекбокса без атрибута value значение "on"

for (const [key, value] of data) {    // FormData можно перебрать как пары «ключ, значение»
  console.log(key, "=", value);
}

Из FormData легко получить привычный объект — он пригодится, чтобы сохранить данные или показать их пользователю (упакованный в JSON, как на уроке 7):

document.body.innerHTML = `
  <form>
    <input name="fullName" value="Мадина">
    <input name="age" type="number" value="19">
  </form>`;

const data = new FormData(document.querySelector("form"));
const obj = Object.fromEntries(data);   // { fullName: "Мадина", age: "19" }

console.log(JSON.stringify(obj));
console.log(typeof obj.age);   // string — все значения по-прежнему строки!

Позже, когда мы дойдём до работы с сервером, этот же объект FormData можно будет отправить на сервер как есть. А пока наша цель — собрать данные и убедиться, что они правильные.

Читать подробнее: FormData · MDN: FormData

document.body.innerHTML = `
  <form>
    <input name="fullName" value="Зарина Ахмедова">
    <input name="email" value="zarina@mail.tj">
    <select name="city">
      <option value="dushanbe" selected>Душанбе</option>
      <option value="khujand">Худжанд</option>
    </select>
  </form>`;

const form = document.querySelector("form");

// создайте FormData и выведите три значения через data.get(...)

Имя: Зарина Ахмедова
Email: zarina@mail.tj
Город: dushanbe

document.body.innerHTML = `
  <form>
    <input value="Далер">
    <input name="phone" value="+992900000000" disabled>
    <input type="checkbox" name="agree" checked>
  </form>`;

const form = document.querySelector("form");
console.log(JSON.stringify(Object.fromEntries(new FormData(form))));

{"fullName":"Далер","phone":"+992900000000","agree":"on"}

document.body.innerHTML = `
  <form>
    <input name="fullName" value="Рустам">
    <input name="age" type="number" value="21">
    <input type="checkbox" name="skills" value="html" checked>
    <input type="checkbox" name="skills" value="css">
    <input type="checkbox" name="skills" value="js" checked>
    <input type="checkbox" name="agree" checked>
    <input type="checkbox" name="news">
  </form>`;

function readForm(form) {
  // верните объект { fullName, age, skills, agree, news }
}

console.log(JSON.stringify(readForm(document.querySelector("form"))));

{"fullName":"Рустам","age":21,"skills":["html","js"],"agree":true,"news":false}

04 Встроенная валидация браузера

Валидация — это проверка, что данные подходят: поле не пустое, email похож на email, возраст в разумных пределах. У браузера уже есть готовая проверка — её включают атрибуты HTML, а JavaScript может её опросить.

Попробуйте прямо в превью: оставьте поле пустым или впишите «ali@» и нажмите «Отправить». Браузер сам покажет всплывающую подсказку и не пропустит форму дальше.

<form id="f">
  <label>Имя <input name="fullName" required></label>
  <label>Email <input name="email" type="email" required></label>
  <label>Возраст <input name="age" type="number" min="16" max="70"></label>
  <button>Отправить</button>
</form>

form { display: grid; gap: 10px; max-width: 320px; }
label { display: grid; gap: 4px; font-size: 14px; }
input, button { padding: 6px 8px; font: inherit; }
/* :user-invalid подсвечивает поле только ПОСЛЕ того, как пользователь с ним поработал */
input:user-invalid { border: 2px solid #d33; background: #fff0f0; }
input:user-valid { border: 2px solid #2a9d5c; }

const form = document.querySelector("#f");

// Песочница блокирует настоящую отправку, поэтому «Отправить» обрабатываем по клику.
// На обычной странице вместо этого пишут form.addEventListener("submit", ...)
form.querySelector("button").addEventListener("click", (event) => {
  event.preventDefault();
  if (form.reportValidity()) {          // показывает подсказки браузера, если что-то не так
    console.log("Форма прошла проверку браузера");
  }
});

Спросим у браузера из JavaScript

У каждого поля есть методы и свойства, которые сообщают результат встроенной проверки:

document.body.innerHTML = `
  <form>
    <input name="email" type="email" required value="madina@">
  </form>`;

const email = document.querySelector("[name=email]");

console.log(email.checkValidity());          // false — поле не проходит проверку
console.log(email.validity.valid);           // false — то же самое, но как свойство
console.log(email.validity.typeMismatch);    // true — «тип не тот»: это не email
console.log(email.validity.valueMissing);    // false — поле не пустое

email.value = "madina@mail.tj";
console.log(email.checkValidity());          // true — теперь всё хорошо

checkValidity()

Возвращает true / false. У формы проверяет все её поля сразу.

reportValidity()

То же, но ещё и показывает пользователю всплывающую подсказку браузера.

validity

Объект с флагами причин: valueMissing (пусто при required), typeMismatch (не email/url), patternMismatch (не подошёл pattern), rangeUnderflow / rangeOverflow (меньше min / больше max), tooShort / tooLong, customError.

validationMessage

Текст ошибки на языке браузера пользователя. У одного человека он русский, у другого английский — управлять им нельзя.

setCustomValidity("текст")

Вручную объявляет поле невалидным с вашим сообщением. Пустая строка "" снимает ошибку.

document.body.innerHTML = `
  <form>
    <input name="password" type="password" value="qwerty123">
    <input name="confirm" type="password" value="qwerty321">
  </form>`;

const { password, confirm } = document.querySelector("form").elements;

confirm.setCustomValidity(password.value === confirm.value ? "" : "Пароли не совпадают");

console.log(confirm.checkValidity());        // false — пароли разные
console.log(confirm.validationMessage);      // Пароли не совпадают

Чего не хватает встроенной валидации

• Тексты ошибок — на языке и в стиле браузера, их не оформить по дизайну сайта.
• Один пузырёк за раз — человек видит только первую ошибку, а не все сразу.
• Сложные правила — «пароли совпадают», «телефон только таджикский» требуют своего кода.
• Живая проверка по ходу ввода — «красиво» без своего JavaScript не получится.

Поэтому на практике делают так: ставят базовые атрибуты (required, type) ради подсказок мобильной клавиатуры, а саму проверку и тексты ошибок пишут в JavaScript и отключают браузерные пузырьки атрибутом novalidate на форме:

<form id="reg" novalidate>
  <input name="email" type="email" required>
</form>

Читать подробнее: MDN: валидация форм на стороне клиента · MDN: ValidityState

document.body.innerHTML = `
  <form>
    <input name="fullName" required value="">
    <input name="email" type="email" value="madina@">
    <input name="age" type="number" min="16" max="70" value="15">
    <input name="phone" pattern="\\+992[0-9]{9}" value="+992927771234">
  </form>`;

const form = document.querySelector("form");
const bad = [];

// пройдите по form.elements и наполните массив bad именами невалидных полей

console.log("Невалидные поля: " + bad.join(", "));

Невалидные поля: fullName, email, age

document.body.innerHTML = `
  <input id="a" required value="">
  <input id="b" type="email" value="ali.mail.tj">
  <input id="c" type="number" min="16" value="12">
  <input id="d" pattern="[0-9]{4}" value="12ab">
  <input id="e" required value="всё хорошо">`;

function reasonOf(input) {
  // верните одну из пяти строк
}

for (const id of ["a", "b", "c", "d", "e"]) {
  console.log(id + ": " + reasonOf(document.getElementById(id)));
}

a: пусто
b: не email
c: слишком мало
d: не по шаблону
e: ок

document.body.innerHTML = `
  <form>
    <input name="fullName" required>
    <input name="email" type="email" value="madina@mail.tj">
  </form>`;

const form = document.querySelector("form");

// 1) выведите form.checkValidity()
// 2) впишите имя в поле fullName
// 3) выведите form.checkValidity() ещё раз

false
true

05 Регулярные выражения для новичков

Регулярное выражение (regex, «регэксп») — это короткий шаблон, который описывает, как должна выглядеть строка. «Только цифры», «начинается с +992 и дальше девять цифр», «латинские буквы и подчёркивание» — всё это записывается одной строчкой. Для проверки форм это незаменимый инструмент.

const onlyDigits = /^\d+$/;          // между слэшами — шаблон

console.log(onlyDigits.test("12345"));  // true  — подходит
console.log(onlyDigits.test("12a45"));  // false — есть буква
console.log(onlyDigits.test(""));       // false — пусто (нужна хотя бы одна цифра)

Регулярное выражение записывается между двумя слэшами /.../. Метод .test(строка) возвращает true, если строка подходит под шаблон, иначе — false. Теперь разберём «буквы» этого языка.

Алфавит регулярок: всего несколько символов

Читаем регулярку по частям

Номер телефона в Таджикистане: +992 и девять цифр. Разберём шаблон слева направо:

const phone = /^\+992\d{9}$/;

console.log(phone.test("+992927771234"));    // true
console.log(phone.test("+99292777123"));     // false — только 8 цифр
console.log(phone.test("+9929277712345"));   // false — 10 цифр, лишняя
console.log(phone.test("927771234"));        // false — нет кода страны

Якоря ^ и $: самая частая ошибка

Без ^ и $ регулярка ищет подходящий кусочек внутри строки — и пропускает мусор вокруг:

const bad  = /\d{4}/;      // «где-то в строке есть 4 цифры подряд»
const good = /^\d{4}$/;    // «вся строка — ровно 4 цифры»

console.log(bad.test("abc1234xyz"));   // true  ← ✖ пропустили мусор
console.log(good.test("abc1234xyz"));  // false ← так правильно
console.log(good.test("1234"));        // true

Флаги и замена: чистим ввод

После закрывающего слэша можно ставить флаги: i — не различать большие и маленькие буквы, g — искать все совпадения, а не только первое. С методом replace это удобный способ почистить телефон от пробелов и дефисов:

const raw = "+992 92 777-12-34";
const clean = raw.replace(/[\s-]/g, "");   // убираем все пробелы и дефисы
console.log(clean);                        // +992927771234

console.log(/^tj$/i.test("TJ"));           // true — регистр не важен из-за флага i
console.log("a1b22c333".replace(/\D/g, ""));  // 122333 — оставили только цифры

Готовые шаблоны для форм

Читать подробнее: Шаблоны и флаги · Якоря: начало ^ и конец $ · MDN: регулярные выражения

const onlyDigits = /___/;

for (const s of ["12345", "12a45", "", "007"]) {
  console.log("[" + s + "] → " + onlyDigits.test(s));
}

[12345] → true
[12a45] → false
[] → false
[007] → true

function isPhone(value) {
  // 1) очистите value   2) проверьте шаблон
}

const tests = ["+992927771234", "+992 92 777-12-34", "927771234", "+99292777123", "+992abc771234", ""];
for (const t of tests) {
  console.log("[" + t + "] → " + isPhone(t));
}

[+992927771234] → true
[+992 92 777-12-34] → true
[927771234] → false
[+99292777123] → false
[+992abc771234] → false
[] → false

function isLogin(value) {
  // верните true или false
}

const tests = ["madina_01", "Rustam", "1madina", "ma", "madina-01", "Shahrom_Komilov_2024_x"];
for (const t of tests) {
  console.log(t + " → " + isLogin(t));
}

madina_01 → true
Rustam → true
1madina → false
ma → false
madina-01 → false
Shahrom_Komilov_2024_x → false

const zip = /\d{6}/;

for (const s of ["734025", "73402", "7340256", "ab734025"]) {
  console.log(s + " → " + zip.test(s));
}

734025 → true
73402 → false
7340256 → false
ab734025 → false

function passwordStrength(p) {
  let points = 0;
  // добавляйте к points по 1 за каждое условие

  // верните "слабый", "средний" или "сильный"
}

for (const p of ["", "abc", "12345678", "madina123", "Madina2024", "Madina2024!"]) {
  console.log("[" + p + "] → " + passwordStrength(p));
}

[] → слабый
[abc] → слабый
[12345678] → слабый
[madina123] → средний
[Madina2024] → средний
[Madina2024!] → сильный

06 Своя валидация: функции-валидаторы и тексты ошибок

Теперь у нас есть всё, чтобы написать собственную проверку. Рецепт простой и работает для любой формы:

1. Один валидатор на поле. Это функция, которая принимает значение и возвращает текст ошибки — или пустую строку "", если всё хорошо.
2. Собираем в объект. { fullName: validateName, email: validateEmail, ... } — по ключу видно, какой валидатор к какому полю.
3. Показываем ошибки. Текст — в <span> под полем, а само поле помечаем красной рамкой и атрибутом aria-invalid.
4. Не отправляем, пока есть хоть одна ошибка.

Шаг 1: валидатор — это функция «значение → текст ошибки»

function validateEmail(value) {
  const email = value.trim();                       // убираем пробелы по краям
  if (email === "") return "Введите email";
  if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
    return "Похоже, в адресе ошибка. Пример: madina@mail.tj";
  }
  return "";                                        // пустая строка = ошибок нет
}

console.log("[" + validateEmail("") + "]");
console.log("[" + validateEmail("madina@") + "]");
console.log("[" + validateEmail("  madina@mail.tj ") + "]");

Функция только проверяет и ничего не знает про страницу. Поэтому её легко тестировать (мы только что вызвали её с тремя примерами) и легко использовать повторно — на любой странице и с любым дизайном. Правило «функция считает, другая функция показывает» вы уже встречали на уроке 5.

Какие тексты ошибок писать

• Говорите на «вы» и спокойно: не «Ты ввёл неправильно», а «Проверьте, пожалуйста, email».
• Называйте правило, а не только факт ошибки: «минимум 2 буквы» полезнее, чем «слишком коротко».
• Показывайте ошибку рядом с полем, а не одним окном alert вверху страницы.
• Пустое обязательное поле и неверный формат — это разные сообщения: «Введите email» и «Неверный формат email».

Шаг 2: проверяем все поля сразу

Когда валидаторов несколько, удобно держать их в объекте и пройти циклом. На выходе — объект ошибок: в нём есть ключи только у невалидных полей. Пустой объект — всё хорошо.

const validators = {
  fullName: (v) => (v.trim().length < 2 ? "Введите имя (минимум 2 буквы)" : ""),
  age: (v) => (Number(v) >= 16 ? "" : "Курс с 16 лет"),
};

function validateAll(data) {
  const errors = {};
  for (const field in validators) {
    const message = validators[field](data[field]);
    if (message) errors[field] = message;
  }
  return errors;
}

console.log(JSON.stringify(validateAll({ fullName: "Мадина", age: "19" })));   // {}
console.log(JSON.stringify(validateAll({ fullName: "М", age: "15" })));

Шаг 3: показываем ошибку на странице

Каждое поле получает «место для ошибки» — пустой <span> рядом. При ошибке мы пишем в него текст, при её отсутствии — стираем. Всегда используйте textContent, а не innerHTML: ввод пользователя нельзя вставлять в страницу как HTML.

<form id="f" novalidate>
  <div class="field">
    <label for="fullName">Имя</label>
    <input id="fullName" name="fullName">
    <span class="error" data-error="fullName"></span>
  </div>
  <div class="field">
    <label for="age">Возраст</label>
    <input id="age" name="age" inputmode="numeric">
    <span class="error" data-error="age"></span>
  </div>
  <button>Отправить</button>
</form>

form { display: grid; gap: 12px; max-width: 320px; }
.field { display: grid; gap: 4px; }
label { font-size: 14px; }
input, button { padding: 6px 8px; font: inherit; }
input.invalid { border: 2px solid #d33; background: #fff0f0; }
.error { color: #c0392b; font-size: 13px; min-height: 1em; }

const form = document.querySelector("#f");

const validators = {
  fullName: (v) => (v.trim().length < 2 ? "Введите имя (минимум 2 буквы)" : ""),
  age: (v) => (Number(v) >= 16 ? "" : "Возраст — число от 16"),
};

function showError(name, message) {
  const input = form.elements[name];
  const box = form.querySelector(`[data-error="${name}"]`);
  box.textContent = message;                               // пустая строка стирает ошибку
  input.classList.toggle("invalid", message !== "");       // красная рамка
  input.setAttribute("aria-invalid", message ? "true" : "false");  // для читалок экрана
}

form.addEventListener("submit", (event) => {
  event.preventDefault();
  let firstBad = null;
  for (const name in validators) {
    const message = validators[name](form.elements[name].value);
    showError(name, message);
    if (message && !firstBad) firstBad = form.elements[name];
  }
  if (firstBad) {
    firstBad.focus();                 // ставим курсор в первое ошибочное поле
    return;                           // дальше не идём — форма не отправляется
  }
  console.log("Отправлено:", JSON.stringify(Object.fromEntries(new FormData(form))));
});

// Песочница блокирует настоящую отправку формы, поэтому клик по кнопке превращаем в submit вручную
// (на обычной странице эта вставка не нужна)
form.querySelector("button").addEventListener("click", (event) => {
  event.preventDefault();
  form.dispatchEvent(new Event("submit", { cancelable: true }));
});

Запустите, нажмите «Отправить» с пустыми полями, затем исправьте и отправьте снова. Обратите внимание на три детали: ошибки показываются сразу у всех полей, курсор встаёт в первое «плохое» поле, а у исправленного поля ошибка пропадает.

Читать подробнее: Фокусировка: focus/blur · MDN: валидация форм с помощью JavaScript

function validateName(value) {
  // верните "" или текст ошибки
}

for (const v of ["", "   ", "А", "Мадина", "  Фарход  "]) {
  console.log("[" + validateName(v) + "]");
}

[Введите имя]
[Введите имя]
[Имя слишком короткое]
[]
[]

function validateAge(value) {
  // не забудьте: Number("") равно 0, поэтому пустоту проверяем отдельно и первой
}

for (const v of ["", "abc", "15", "24", "99", " 30 "]) {
  console.log("[" + validateAge(v) + "]");
}

[Введите возраст]
[Возраст — это число]
[Курс с 16 лет]
[]
[Проверьте возраст]
[]

function validatePassword(password, login) {
  const problems = [];
  // добавляйте тексты в problems через push
  return problems;
}

const tests = [["abc", "madina"], ["Madina", "madina"], ["pass word 1", "x"], ["qwerty123", "madina"]];
for (const [p, l] of tests) {
  console.log(validatePassword(p, l).join(" | ") || "ок");
}

Минимум 8 символов | Добавьте цифру
Минимум 8 символов | Добавьте цифру | Не совпадает с логином
Без пробелов
ок

function validateName(v) {
  return v.trim().length < 2 ? "Введите имя" : "";
}
function validateEmail(v) {
  if (v.trim() === "") return "Введите email";
  return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(v.trim()) ? "" : "Неверный email";
}
function validatePhone(v) {
  return /^\+992\d{9}$/.test(v.replace(/[\s-]/g, "")) ? "" : "Телефон: +992 и 9 цифр";
}

const validators = { fullName: validateName, email: validateEmail, phone: validatePhone };

function validateForm(data) {
  // верните объект ошибок
}

const forms = [
  { fullName: "Мадина", email: "madina@mail.tj", phone: "+992 92 777 12 34" },
  { fullName: " ", email: "madina@", phone: "+992927771234" },
  { fullName: "Фарход", email: "", phone: "927771234" },
];
for (const data of forms) console.log(JSON.stringify(validateForm(data)));

{}
{"fullName":"Введите имя","email":"Неверный email"}
{"email":"Введите email","phone":"Телефон: +992 и 9 цифр"}

<form id="f" novalidate>
  <div class="field">
    <label for="fullName">Имя</label>
    <input id="fullName" name="fullName">
    <span class="error" data-error="fullName"></span>
  </div>
  <div class="field">
    <label for="email">Email</label>
    <input id="email" name="email">
    <span class="error" data-error="email"></span>
  </div>
  <button>Отправить</button>
</form>

form { display: grid; gap: 12px; max-width: 320px; }
.field { display: grid; gap: 4px; }
input, button { padding: 6px 8px; font: inherit; }
input.invalid { border: 2px solid #d33; background: #fff0f0; }
.error { color: #c0392b; font-size: 13px; min-height: 1em; }

const form = document.querySelector("#f");

const validators = {
  fullName: (v) => (v.trim().length < 2 ? "Введите имя (минимум 2 буквы)" : ""),
  email: (v) => (/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(v.trim()) ? "" : "Введите email, например madina@mail.tj"),
};

function showError(name, message) {
  // текст в span, класс invalid, aria-invalid
}

form.addEventListener("submit", (event) => {
  // preventDefault, проверка всех полей, showError, "Отправлено" при успехе
});

// ---- проверка (не менять) ----
// Песочница блокирует настоящую отправку формы, поэтому клик по кнопке превращаем в submit вручную
// (на обычной странице эта вставка не нужна)
form.querySelector("button").addEventListener("click", (event) => {
  event.preventDefault();
  form.dispatchEvent(new Event("submit", { cancelable: true }));
});
function report(name) {
  const input = form.elements[name];
  const text = form.querySelector(`[data-error="${name}"]`).textContent;
  console.log(`${name}: ${text || "ok"} | aria-invalid=${input.getAttribute("aria-invalid")} | invalid=${input.classList.contains("invalid")}`);
}
function tryWith(fullName, email) {
  form.elements.fullName.value = fullName;
  form.elements.email.value = email;
  form.dispatchEvent(new Event("submit", { cancelable: true }));
  report("fullName");
  report("email");
}
tryWith(" ", "ali@mail.tj");
tryWith("Али", "ali@");
tryWith("Али", "ali@mail.tj");

fullName: Введите имя (минимум 2 буквы) | aria-invalid=true | invalid=true
email: ok | aria-invalid=false | invalid=false
fullName: ok | aria-invalid=false | invalid=false
email: Введите email, например madina@mail.tj | aria-invalid=true | invalid=true
Отправлено
fullName: ok | aria-invalid=false | invalid=false
email: ok | aria-invalid=false | invalid=false

07 Живая валидация: проверяем, пока человек печатает

Проверка только при нажатии «Отправить» работает, но неудобно: человек заполнил десять полей и узнаёт об ошибке в самом первом. Живая валидация подсказывает сразу. Для неё нужны три события:

input

Срабатывает на каждое изменение значения: нажали клавишу, вставили текст, стёрли символ.

change

Срабатывает, когда значение поменялось и поле потеряло фокус (для чекбокса и списка — сразу при выборе).

blur

Поле потеряло фокус — человек ушёл в другое поле. Не всплывает (в отличие от focusout).

Правило «тронуто / не тронуто» (touched)

1. Пока человек не покидал поле — ошибку не показываем, даже если значение пока неверное.
2. Когда сработал blur — поле считается «тронутым»: проверяем и показываем ошибку.
3. С этого момента на каждый input перепроверяем: как только человек исправил, ошибка исчезает сразу.
4. При нажатии «Отправить» «трогаем» все поля сразу и показываем все ошибки.

<form id="f" novalidate>
  <div class="field">
    <label for="email">Email</label>
    <input id="email" name="email" type="email" autocomplete="off">
    <span class="error" id="email-error"></span>
  </div>
  <div class="field">
    <label for="pass">Пароль</label>
    <div class="row">
      <input id="pass" name="pass" type="password" maxlength="20">
      <button type="button" id="eye">Показать</button>
    </div>
    <span class="hint" id="pass-hint">Введено: 0 из 20</span>
  </div>
</form>

form { display: grid; gap: 12px; max-width: 320px; }
.field { display: grid; gap: 4px; }
.row { display: flex; gap: 6px; }
.row input { flex: 1; }
input, button { padding: 6px 8px; font: inherit; }
input.invalid { border: 2px solid #d33; background: #fff0f0; }
.error { color: #c0392b; font-size: 13px; min-height: 1em; }
.hint { color: #667; font-size: 13px; }

const email = document.querySelector("#email");
const emailError = document.querySelector("#email-error");
let touched = false;

function validateEmail() {
  const value = email.value.trim();
  let message = "";
  if (value === "") message = "Введите email";
  else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value)) message = "Похоже, в адресе ошибка";
  emailError.textContent = message;
  email.classList.toggle("invalid", message !== "");
}

email.addEventListener("blur", () => {
  touched = true;          // человек ушёл из поля — теперь можно ругаться
  validateEmail();
});
email.addEventListener("input", () => {
  if (touched) validateEmail();   // после первого «ухода» проверяем на каждую букву
});

// пароль: счётчик символов и кнопка «показать»
const pass = document.querySelector("#pass");
const hint = document.querySelector("#pass-hint");
pass.addEventListener("input", () => {
  hint.textContent = `Введено: ${pass.value.length} из ${pass.maxLength}`;
});

document.querySelector("#eye").addEventListener("click", (event) => {
  const hidden = pass.type === "password";
  pass.type = hidden ? "text" : "password";
  event.target.textContent = hidden ? "Скрыть" : "Показать";
});

Попробуйте: наберите в email «ali» — ничего не происходит. Нажмите Tab — появилась ошибка. Допишите «@mail.tj» — ошибка исчезла прямо во время набора.

Сравнение двух полей: пароль и повтор

Правило «пароли совпадают» зависит от двух полей, поэтому проверять нужно при изменении любого из них. Частая ошибка — подписаться только на второе поле: человек поправил первый пароль, а красная ошибка у второго осталась.

document.body.innerHTML = `<input id="pass"><input id="again"><span id="msg"></span>`;
const pass = document.querySelector("#pass");
const again = document.querySelector("#again");
const msg = document.querySelector("#msg");

function checkMatch() {
  msg.textContent = pass.value === again.value ? "" : "Пароли не совпадают";
}
pass.addEventListener("input", checkMatch);    // оба поля влияют на результат
again.addEventListener("input", checkMatch);

pass.value = "qwerty1";   pass.dispatchEvent(new Event("input"));
again.value = "qwerty1";  again.dispatchEvent(new Event("input"));
console.log("[" + msg.textContent + "]");       // [] — совпали
pass.value = "qwerty2";   pass.dispatchEvent(new Event("input"));
console.log("[" + msg.textContent + "]");       // [Пароли не совпадают] — поправили первое

Читать подробнее: События change, input · Фокусировка: focus/blur

document.body.innerHTML = `
  <input id="pass" type="password" value="secret">
  <button id="eye" type="button">Показать</button>`;

const pass = document.querySelector("#pass");
const eye = document.querySelector("#eye");

// добавьте обработчик click для кнопки eye


eye.click();
console.log(pass.type, eye.textContent);
eye.click();
console.log(pass.type, eye.textContent);

text Скрыть
password Показать

document.body.innerHTML = `<textarea id="bio"></textarea><p id="left"></p>`;
const bio = document.querySelector("#bio");
const left = document.querySelector("#left");
const LIMIT = 40;

// 1) функция update() записывает в left текст «Осталось: N»
// 2) вызовите её сразу и на событие input


console.log(left.textContent);
bio.value = "Привет!";
bio.dispatchEvent(new Event("input"));
console.log(left.textContent);
bio.value = "а".repeat(40);
bio.dispatchEvent(new Event("input"));
console.log(left.textContent);

Осталось: 40
Осталось: 33
Осталось: 0

document.body.innerHTML = `<input id="email"><span id="error"></span>`;
const email = document.querySelector("#email");
const error = document.querySelector("#error");

// ваш код: переменная touched, функция validate, обработчики blur и input


function show() {
  console.log(error.textContent || "нет ошибки");
}

email.value = "ali";
email.dispatchEvent(new Event("input"));
show();
email.dispatchEvent(new Event("blur"));
show();
email.value = "ali@mail.tj";
email.dispatchEvent(new Event("input"));
show();

нет ошибки
Неверный email
нет ошибки

<form id="f">
  <input id="password" type="password" placeholder="Пароль">
  <input id="confirm" type="password" placeholder="Повторите пароль">
  <button id="submit">Создать аккаунт</button>
</form>

form { display: grid; gap: 10px; max-width: 320px; }
input, button { padding: 6px 8px; font: inherit; }
button:disabled { opacity: .5; cursor: not-allowed; }

const password = document.querySelector("#password");
const confirm = document.querySelector("#confirm");
const submit = document.querySelector("#submit");

function updateButton() {
  // submit.disabled = ... (true, пока условия не выполнены)
}

// вызовите updateButton() при загрузке и при input в обоих полях


// ---- проверка (не менять) ----
const state = () => (submit.disabled ? "заблокирована" : "активна");
function type(field, value) {
  field.value = value;
  field.dispatchEvent(new Event("input", { bubbles: true }));
  console.log(`пароль="${password.value}", повтор="${confirm.value}" → кнопка ${state()}`);
}
console.log("старт: кнопка " + state());
type(password, "1234");
type(password, "12345678");
type(confirm, "1234567");
type(confirm, "12345678");
type(password, "87654321");

старт: кнопка заблокирована
пароль="1234", повтор="" → кнопка заблокирована
пароль="12345678", повтор="" → кнопка заблокирована
пароль="12345678", повтор="1234567" → кнопка заблокирована
пароль="12345678", повтор="12345678" → кнопка активна
пароль="87654321", повтор="12345678" → кнопка заблокирована

08 ИИ-блок: правила валидации и регулярки

Напомним правила курса: сначала пробуйте сами 15 минут, и никогда не вставляйте код, который не можете объяснить строка за строкой. Сегодня вы уже умеете читать регулярки, так что ответ ИИ можно разобрать по частям.

1. Просим правила валидации

Используем формулу промпта: контекст → задача → ограничения → формат ответа → проверка.

2. Проверяем регулярку от ИИ на своих кейсах

Не верьте на слово даже самому уверенному ответу. Заведите привычку — таблица тестов:

1. 3–5 подходящих строк, включая «грязные» (с пробелами по краям, в разном регистре).
2. Пустая строка — должна быть отвергнута (если поле обязательное).
3. Границы длины: на единицу меньше минимума, ровно минимум, ровно максимум, на единицу больше.
4. «Мусор» вокруг: abc1234xyz там, где нужны только цифры. Так вы ловите отсутствие ^ и $.
5. Ваши настоящие данные: телефоны из вашей записной книжки, имена друзей на кириллице, ваш реальный email.

const re = /^\+992\d{9}$/;   // регулярка от ИИ

const cases = [
  ["+992927771234", true],      // подходит
  [" +992927771234", false],    // пробел в начале — вы решаете, допустимо ли
  ["+99292777123", false],      // на цифру меньше
  ["+9929277712345", false],    // на цифру больше
  ["abc+992927771234xyz", false],  // мусор вокруг
  ["", false],                  // пусто
];

for (const [value, expected] of cases) {
  console.log((re.test(value) === expected ? "ok  " : "FAIL") + " [" + value + "]");
}

3. Что ИИ делает неправильно чаще всего

const re = /\d/g;                  // флаг g — «помни, где остановился»
console.log(re.test("1"));         // true
console.log(re.test("1"));         // false ← ✖ та же строка, другой ответ
console.log(re.test("1"));         // true

4. Ещё три полезных промпта

const phoneRe = /^\+992\d{9}/;   // регулярка от ИИ

const cases = [
  ["+992927771234", true],
  ["+992927771234567", false],
  ["+99292777123", false],
  ["992927771234", false],
  ["+992 927771234", false],
  ["+992abcdefghi", false],
  ["", false],
];

let failed = 0;
for (const [value, expected] of cases) {
  const ok = phoneRe.test(value) === expected;
  if (!ok) failed++;
  console.log((ok ? "ok" : "FAIL") + ": [" + value + "]");
}
console.log("Не прошли: " + failed);

ok: [+992927771234]
ok: [+992927771234567]
ok: [+99292777123]
ok: [992927771234]
ok: [+992 927771234]
ok: [+992abcdefghi]
ok: []
Не прошли: 0

const isEmail = (s) => /^.+@.+$/.test(s);   // версия от ИИ

const cases = [
  ["madina@mail.tj", true],
  ["  madina@mail.tj  ", true],
  ["m.karimova+tj@gmail.com", true],
  ["madina@", false],
  ["madina@mail", false],
  ["@mail.tj", false],
  ["ma dina@mail.tj", false],
  ["madina@@mail.tj", false],
];

let failed = 0;
for (const [value, expected] of cases) {
  const ok = isEmail(value) === expected;
  if (!ok) failed++;
  console.log((ok ? "ok" : "FAIL") + ": [" + value + "]");
}
console.log("Не прошли: " + failed);

ok: [madina@mail.tj]
ok: [  madina@mail.tj  ]
ok: [m.karimova+tj@gmail.com]
ok: [madina@]
ok: [madina@mail]
ok: [@mail.tj]
ok: [ma dina@mail.tj]
ok: [madina@@mail.tj]
Не прошли: 0

09 Практика на уроке: форма регистрации с живой валидацией

Соберём всё вместе в одну форму — такую, какую вы увидите на любом сайте. Мы строим регистрацию на курс: имя, email, пароль и повтор пароля.

План работы

1. Разметка. Форма с novalidate, у каждого поля — label, name и пустой span.error под ним (data-error="имя поля").
2. Валидаторы. Функции «значение → текст ошибки», собранные в объект validators (раздел 6).
3. Показ ошибок. showError — текст, красная рамка, aria-invalid.
4. Живая проверка. Словарь touched, обработчики blur и input (раздел 7).
5. Отправка. Обработчик submit: «трогаем» все поля, проверяем, фокус на первое ошибочное или успех (раздел 2).

Разметку, стили и общий «каркас» (шаги 1, 3) мы даём готовыми. Ваша работа — два этапа.

<form id="reg" novalidate>
  <div class="field">
    <label for="fullName">Имя</label>
    <input id="fullName" name="fullName" autocomplete="off">
    <span class="error" data-error="fullName"></span>
  </div>
  <div class="field">
    <label for="email">Email</label>
    <input id="email" name="email" type="email" autocomplete="off">
    <span class="error" data-error="email"></span>
  </div>
  <div class="field">
    <label for="password">Пароль</label>
    <input id="password" name="password" type="password">
    <span class="error" data-error="password"></span>
  </div>
  <div class="field">
    <label for="confirm">Повторите пароль</label>
    <input id="confirm" name="confirm" type="password">
    <span class="error" data-error="confirm"></span>
  </div>
  <button>Создать аккаунт</button>
</form>

form { display: grid; gap: 12px; max-width: 340px; }
.field { display: grid; gap: 4px; }
label { font-size: 14px; font-weight: 600; }
input, button { padding: 8px 10px; font: inherit; border: 1px solid #b8c0cc; border-radius: 8px; }
button { background: #1d9a6c; color: #fff; border-color: transparent; cursor: pointer; }
input.invalid { border: 2px solid #d33; background: #fff0f0; }
.error { color: #c0392b; font-size: 13px; min-height: 1em; }

const form = document.querySelector("#reg");
const touched = {};

const validators = {
  fullName(value) {
    // имя: после trim минимум 2 символа → "Имя — минимум 2 буквы"
    return "";
  },
  email(value) {
    // формат /^[^\s@]+@[^\s@]+\.[^\s@]+$/ → "Введите email в формате name@mail.tj"
    return "";
  },
  password(value) {
    // сначала длина: "Пароль — минимум 8 символов", затем цифра: "Добавьте хотя бы одну цифру"
    return "";
  },
};

// ---- готовая часть: показ ошибок и живая проверка ----
function showError(name, message) {
  const input = form.elements[name];
  form.querySelector(`[data-error="${name}"]`).textContent = message;
  input.classList.toggle("invalid", message !== "");
  input.setAttribute("aria-invalid", message ? "true" : "false");
}

function validateField(name) {
  const message = validators[name](form.elements[name].value);
  showError(name, message);
  return message === "";
}

for (const name of Object.keys(validators)) {
  const input = form.elements[name];
  input.addEventListener("blur", () => {
    touched[name] = true;
    validateField(name);
  });
  input.addEventListener("input", () => {
    if (touched[name]) validateField(name);
  });
}

// ---- проверка (не менять) ----
function typeInto(name, value) {
  const field = form.elements[name];
  field.value = value;
  field.dispatchEvent(new Event("input", { bubbles: true }));
}
function leave(name) {
  form.elements[name].dispatchEvent(new Event("blur"));
}
function msg(name) {
  return form.querySelector(`[data-error="${name}"]`).textContent || "ok";
}

typeInto("fullName", "А");
console.log("имя до blur: " + msg("fullName"));
leave("fullName");
console.log("имя после blur: " + msg("fullName"));
typeInto("fullName", "Али");
console.log("имя после правки: " + msg("fullName"));

typeInto("email", "ali@");
leave("email");
console.log("email: " + msg("email"));
typeInto("email", "ali@mail.tj");
console.log("email после правки: " + msg("email"));

typeInto("password", "abcdefgh");
leave("password");
console.log("пароль 1: " + msg("password"));
typeInto("password", "abc");
console.log("пароль 2: " + msg("password"));
typeInto("password", "abcdefg1");
console.log("пароль 3: " + msg("password"));

имя до blur: ok
имя после blur: Имя — минимум 2 буквы
имя после правки: ok
email: Введите email в формате name@mail.tj
email после правки: ok
пароль 1: Добавьте хотя бы одну цифру
пароль 2: Пароль — минимум 8 символов
пароль 3: ok

<form id="reg" novalidate>
  <div class="field">
    <label for="fullName">Имя</label>
    <input id="fullName" name="fullName" autocomplete="off">
    <span class="error" data-error="fullName"></span>
  </div>
  <div class="field">
    <label for="email">Email</label>
    <input id="email" name="email" type="email" autocomplete="off">
    <span class="error" data-error="email"></span>
  </div>
  <div class="field">
    <label for="password">Пароль</label>
    <input id="password" name="password" type="password">
    <span class="error" data-error="password"></span>
  </div>
  <div class="field">
    <label for="confirm">Повторите пароль</label>
    <input id="confirm" name="confirm" type="password">
    <span class="error" data-error="confirm"></span>
  </div>
  <button>Создать аккаунт</button>
</form>

form { display: grid; gap: 12px; max-width: 340px; }
.field { display: grid; gap: 4px; }
label { font-size: 14px; font-weight: 600; }
input, button { padding: 8px 10px; font: inherit; border: 1px solid #b8c0cc; border-radius: 8px; }
button { background: #1d9a6c; color: #fff; border-color: transparent; cursor: pointer; }
input.invalid { border: 2px solid #d33; background: #fff0f0; }
.error { color: #c0392b; font-size: 13px; min-height: 1em; }

const form = document.querySelector("#reg");
const touched = {};

const validators = {
  fullName(value) {
    return value.trim().length < 2 ? "Имя — минимум 2 буквы" : "";
  },
  email(value) {
    return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value.trim()) ? "" : "Введите email в формате name@mail.tj";
  },
  password(value) {
    if (value.length < 8) return "Пароль — минимум 8 символов";
    if (!/\d/.test(value)) return "Добавьте хотя бы одну цифру";
    return "";
  },
  // (1) добавьте сюда confirm(value)
};

function showError(name, message) {
  const input = form.elements[name];
  form.querySelector(`[data-error="${name}"]`).textContent = message;
  input.classList.toggle("invalid", message !== "");
  input.setAttribute("aria-invalid", message ? "true" : "false");
}

function validateField(name) {
  const message = validators[name](form.elements[name].value);
  showError(name, message);
  return message === "";
}

for (const name of Object.keys(validators)) {
  const input = form.elements[name];
  input.addEventListener("blur", () => {
    touched[name] = true;
    validateField(name);
  });
  input.addEventListener("input", () => {
    if (touched[name]) validateField(name);
  });
}

// (2) при изменении пароля перепроверьте confirm, если touched.confirm


// (3) обработчик submit
form.addEventListener("submit", (event) => {
});

// Песочница блокирует настоящую отправку формы, поэтому клик по кнопке превращаем в submit вручную
// (на обычной странице эта вставка не нужна)
form.querySelector("button").addEventListener("click", (event) => {
  event.preventDefault();
  form.dispatchEvent(new Event("submit", { cancelable: true }));
});

// ---- проверка (не менять) ----
function typeInto(name, value) {
  const field = form.elements[name];
  field.value = value;
  field.dispatchEvent(new Event("input", { bubbles: true }));
}
function msg(name) {
  return form.querySelector(`[data-error="${name}"]`).textContent || "ok";
}

typeInto("fullName", "Мадина");
typeInto("email", "madina@mail.tj");
typeInto("password", "qwerty12");
typeInto("confirm", "qwerty1");
form.dispatchEvent(new Event("submit", { cancelable: true }));
console.log("повтор: " + msg("confirm"));
typeInto("confirm", "qwerty12");
console.log("повтор после правки: " + msg("confirm"));
typeInto("password", "qwerty99");
console.log("после смены пароля: " + msg("confirm"));
typeInto("confirm", "qwerty99");
form.dispatchEvent(new Event("submit", { cancelable: true }));

повтор: Пароли не совпадают
повтор после правки: ok
после смены пароля: Пароли не совпадают
Регистрация: Мадина, madina@mail.tj

const form = document.querySelector("#reg");
const touched = {};

const validators = {
  fullName(value) {
    return value.trim().length < 2 ? "Имя — минимум 2 буквы" : "";
  },
  email(value) {
    return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value.trim()) ? "" : "Введите email в формате name@mail.tj";
  },
  password(value) {
    if (value.length < 8) return "Пароль — минимум 8 символов";
    if (!/\d/.test(value)) return "Добавьте хотя бы одну цифру";
    return "";
  },
  confirm(value) {
    return value === form.elements.password.value ? "" : "Пароли не совпадают";
  },
};

function showError(name, message) {
  const input = form.elements[name];
  form.querySelector(`[data-error="${name}"]`).textContent = message;
  input.classList.toggle("invalid", message !== "");
  input.setAttribute("aria-invalid", message ? "true" : "false");
}

function validateField(name) {
  const message = validators[name](form.elements[name].value);
  showError(name, message);
  return message === "";
}

for (const name of Object.keys(validators)) {
  const input = form.elements[name];
  input.addEventListener("blur", () => {
    touched[name] = true;
    validateField(name);
  });
  input.addEventListener("input", () => {
    if (touched[name]) validateField(name);
  });
}

form.elements.password.addEventListener("input", () => {
  if (touched.confirm) validateField("confirm");
});

form.addEventListener("submit", (event) => {
  event.preventDefault();
  let firstBad = null;
  for (const name of Object.keys(validators)) {
    touched[name] = true;
    if (!validateField(name) && !firstBad) firstBad = form.elements[name];
  }
  if (firstBad) {
    firstBad.focus();
    return;
  }
  const data = Object.fromEntries(new FormData(form));
  console.log(`Регистрация: ${data.fullName}, ${data.email}`);
});

// Песочница блокирует настоящую отправку формы, поэтому клик по кнопке превращаем в submit вручную
// (на обычной странице эта вставка не нужна)
form.querySelector("button").addEventListener("click", (event) => {
  event.preventDefault();
  form.dispatchEvent(new Event("submit", { cancelable: true }));
});

★ Домашнее задание: форма из 6 полей

Сделайте форму регистрации на курс «Frontend + AI» с шестью полями, полной валидацией и понятными текстами ошибок. Начинайте с классной работы: она уже содержит каркас, вам нужно расширить его и довести до аккуратного результата.

Поля формы

Что должно работать

• ☐ Разметка: form novalidate, у каждого поля есть label, name и правильный type (tel, email, password, checkbox).
• ☐ Каждый валидатор — отдельная функция «значение → текст ошибки или пустая строка».
• ☐ Живая валидация по схеме «touched»: ошибка появляется после ухода из поля и пропадает сразу при исправлении.
• ☐ При отправке проверяются все поля, фокус ставится на первое ошибочное.
• ☐ Ошибки показываются под полями (textContent), у поля есть красная рамка и aria-invalid.
• ☐ При успехе: на странице появляется сообщение «Спасибо, Имя! Мы свяжемся с вами по номеру ...», данные собраны через FormData, форма сбрасывается. Пароль нигде не показывается и не выводится в консоль.
• ☐ Бонус: кнопка «Показать пароль» и счётчик оставшихся символов — любой один из них.

Что сдать

1. Ссылка на репозиторий GitHub (папка lesson-10 с файлами index.html, style.css, script.js) или архив в Telegram-группу.
2. Три скриншота: пустая отправка (все ошибки), частично заполненная форма, успешная отправка.
3. Файл tests.md: таблица минимум из 10 тестовых значений для телефона и email — «значение → ожидаемый результат» — и отметка, какие ваш код прошёл.
4. Если вы использовали ИИ: в README три строки — что именно просили, что взяли, что исправили руками. На проверке преподаватель может попросить объяснить любую строку.

Как оцениваем (0–10)