Встроенная валидация и своя

Здесь будет встроен видео-разбор темы (5–7 минут, YouTube / RuTube / VK Видео) — тем, кто лучше воспринимает на слух, текст ниже не обязателен.

Половина ограничений формы описывается не кодом, а атрибутами. required запрещает пустое значение, pattern сверяет строку с регулярным выражением, min и max ограничивают число или дату, step задаёт шаг, minlength и maxlength — длину. Браузер сам не пустит такую форму дальше и сам покажет подсказку на языке пользователя.

js

const input = document.querySelector("#promo input");

console.log(input.checkValidity());

input.value = "new-10";
console.log(input.checkValidity());

input.value = "NEW-10";
console.log(input.checkValidity());

страница примера

Сначала предположите, что выведет код

Два момента про pattern: он сверяется со строкой целиком, поэтому якоря ^ и $ писать не нужно, они подразумеваются. И у пустого поля pattern молчит — формат проверяется только у непустого значения, поэтому pattern почти всегда ходит в паре с required.

js

const form = document.querySelector("#ord");
const qty = form.elements.qty;

console.log(qty.validity.rangeOverflow);

qty.value = "0";
console.log(qty.validity.rangeUnderflow);

qty.value = "7";
console.log(qty.validity.valid);

console.log(form.elements.day.validity.rangeUnderflow);

страница примера

Сначала предположите, что выведет код

У поля нет единственного признака ошибки. Есть объект validity — набор булевых свойств, где каждое отвечает за свой вид нарушения, плюс итоговое valid. Рядом лежит validationMessage: тот самый текст, который браузер показал бы в пузыре.

js

const mail = document.querySelector("#reg input");

console.log(mail.validity.typeMismatch);
console.log(mail.validity.valueMissing);
console.log(mail.validity.valid);

mail.value = "";
console.log(mail.validity.valueMissing);
console.log(mail.validity.typeMismatch);

mail.value = "rico@example.com";
console.log(mail.validity.valid);
console.log(mail.validationMessage === "");

страница примера

Сначала предположите, что выведет код

Что задали в разметке	Какой флаг загорится
required	valueMissing
type="email", type="url"	typeMismatch
pattern	patternMismatch
min / max	rangeUnderflow / rangeOverflow
step	stepMismatch
minlength / maxlength	tooShort / tooLong
setCustomValidity("текст")	customError

Две тонкости. tooShort и tooLong загораются только от ввода человека — значение, присвоенное из скрипта, ограничение длины не нарушает. А поля disabled, readonly, кнопки и type="hidden" в проверке вообще не участвуют: у них willValidate равно false, и форма считает их валидными всегда.

Всё, чего браузер знать не может — совпадение паролей, сумма не больше остатка на счёте, дата выезда позже даты заезда, — подключается через setCustomValidity. Метод принимает строку: непустая делает поле невалидным и становится его validationMessage, пустая снимает ошибку. Ваше правило после этого живёт по общим законам: поле не пройдёт checkValidity, не даст отправить форму и попадёт под те же CSS-псевдоклассы.

js

const a = document.querySelector("#a");
const b = document.querySelector("#b");

function sync() {
  b.setCustomValidity(a.value === b.value ? "" : "Пароли не совпадают");
}

sync();
console.log(b.validity.customError);
console.log(b.validationMessage);

b.value = "secret";
sync();
console.log(b.validity.valid);
console.log(b.validity.customError);

страница примера

Сначала предположите, что выведет код

Собственная ошибка живёт до тех пор, пока её явно не стёрли. Если вызвать setCustomValidity с текстом и забыть про ветку с пустой строкой, поле останется невалидным навсегда — сколько бы правильных значений в него ни ввели.

js

const n = document.querySelector("#n");

n.setCustomValidity("Это имя занято");
n.value = "rico";
console.log(n.validity.valid);

n.setCustomValidity("");
console.log(n.validity.valid);

страница примера

Сначала предположите, что выведет код

checkValidity() возвращает булево значение и попутно шлёт событие invalid каждому проблемному полю — тихо, без интерфейса. reportValidity() делает ровно то же самое, но вдобавок фокусирует первое нарушенное поле и показывает пузырь. У формы оба метода проверяют все её поля разом. Событие invalid не всплывает, поэтому слушать его на форме нужно в фазе перехвата — третьим аргументом true.

js

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

form.addEventListener("invalid", (event) => bad.push(event.target.name), true);

console.log(form.checkValidity());
console.log(bad);
console.log(form.elements.age.validity.rangeUnderflow);

страница примера

Сначала предположите, что выведет код

Именно reportValidity браузер вызывает сам, когда пользователь нажимает кнопку отправки. Пока форма невалидна, событие submit просто не наступает — и это видно без единого клика, если отправить форму из кода через requestSubmit().

js

const form = document.querySelector("#gate");
let sent = 0;

form.addEventListener("submit", (event) => {
  event.preventDefault();
  sent += 1;
});

form.requestSubmit();
console.log(sent);

form.elements.nick.value = "rico";
form.requestSubmit();
console.log(sent);

страница примера

Сначала предположите, что выведет код

Стандартный пузырь нельзя ни подвинуть, ни перекрасить, и живёт он до первого клика мимо. Как только нужен свой текст под полем, форме ставят атрибут novalidate: браузер перестаёт блокировать отправку и показывать подсказки, но validity, checkValidity и setCustomValidity продолжают работать. Вы забираете себе только показ ошибок, а не сам механизм проверки — писать регулярки заново не приходится.

js

const form = document.querySelector("#pay");
const err = document.querySelector("#err");
const card = form.elements.card;

form.addEventListener("submit", (event) => {
  event.preventDefault();
  err.textContent = card.validity.valid ? "" : "Нужны ровно четыре цифры";
  card.setAttribute("aria-invalid", String(!card.validity.valid));
});

form.requestSubmit();
console.log(err.textContent);
console.log(card.getAttribute("aria-invalid"));

card.value = "1234";
form.requestSubmit();
console.log(err.textContent === "");

страница примера

Сначала предположите, что выведет код

Текст ошибки видит зрячий пользователь — скринридеру о нём нужно сказать отдельно. Минимум: aria-invalid на поле, как в примере, и aria-describedby, связывающий поле с элементом сообщения.

CSS-псевдокласс :invalid срабатывает с первой секунды: пустое required-поле подсвечено ещё до того, как человек в него заглянул, — ощущается как обвинение авансом. Псевдокласс :user-invalid ждёт, пока пользователь попробует ввести значение или отправить форму — именно то поведение, которое раньше имитировали руками через классы вроде touched.

Всё, что описано выше, выполняется на машине пользователя. А значит, на машине пользователя же и отключается. Ниже — те самые две строки, которые любой человек введёт в консоли DevTools за десять секунд.

js

const form = document.querySelector("#lock");
const mail = form.elements.mail;

console.log(form.checkValidity());

mail.removeAttribute("required");
mail.type = "text";

console.log(form.checkValidity());
console.log(new FormData(form).get("mail"));

страница примера

Сначала предположите, что выведет код

И дело не только в злом умысле. Запрос к вашему API может прийти из мобильного приложения, из скрипта, из чужой интеграции — там никакого HTML не существует в принципе. Плюс целый класс правил браузеру просто недоступен: занят ли логин, действует ли промокод, остался ли товар на складе. Такие проверки приходят с сервера, а на клиенте лишь показываются — например, тем же setCustomValidity по ответу. Как пишут проверку на той стороне, где браузера нет и каждое присланное поле разбирают заново, показывает статья «Действие — это открытый эндпоинт»; собственный сервер на Node.js появится в части VI.

Браузерная валидация — про удобство, серверная — про доверие. Первая может ошибиться в вашу пользу, вторая не имеет права ошибиться никогда.

Атрибуты required, pattern, min, max, step, minlength и maxlength — это уже валидация: браузер сам блокирует отправку и показывает подсказку.
Объект validity разбирает ошибку на конкретные флаги — valueMissing, typeMismatch, patternMismatch, rangeOverflow и прочие, — а validationMessage хранит готовый текст.
setCustomValidity подключает собственные правила к тому же механизму; пустая строка снимает ошибку, и забыть про неё — самый частый баг.
checkValidity проверяет молча и шлёт невсплывающее событие invalid, reportValidity ещё и фокусирует поле с пузырём; novalidate отключает только показ, а не сам API.
Клиентская проверка снимается двумя строками в консоли и не существует для запросов мимо браузера, поэтому сервер обязан проверять данные заново.

1/3Поле <input required pattern="[0-9]{4}"> пустое. Какие флаги validity истинны?

2/3Что делает setCustomValidity("") на поле, которому раньше задали своё сообщение?

3/3Форме поставили атрибут novalidate. Что изменится?

Подтверждение пароля

Второе поле должно быть невалидным, пока его значение не совпадает с первым, и сообщение должно попадать в validationMessage. Допишите функцию sync так, чтобы оба console.log напечатали true.

js

const p1 = document.querySelector("#p1");
const p2 = document.querySelector("#p2");

function sync() {
  // ваш код
}

sync();
console.log(p2.validity.customError); // ожидается true

p2.value = "qwerty";
sync();
console.log(p2.validity.valid); // ожидается true

страница примера

Сначала предположите, что выведет код

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

jsлистинг · не запускается

function sync() {
  p2.setCustomValidity(p1.value === p2.value ? "" : "Пароли не совпадают");
}

function sync() {
  p2.setCustomValidity(p1.value === p2.value ? "" : "Пароли не совпадают");
}

Ветка с пустой строкой обязательна: без неё поле, единожды помеченное ошибкой, останется невалидным даже с правильным значением. В реальной форме эту же функцию вешают на событие input обоих полей, чтобы состояние пересчитывалось при каждом нажатии клавиши.

Список проблемных полей

Напишите функцию, которая возвращает массив имён полей формы, не проходящих проверку. Осторожно: form.elements содержит не только поля ввода.

js

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

function badFields() {
  // верните массив имён полей, которые не проходят проверку
  return [];
}

console.log(badFields()); // ожидается ["name", "age"]

страница примера

Сначала предположите, что выведет код

Коллекцию form.elements превращаем в массив и фильтруем:

jsлистинг · не запускается

function badFields() {
  return Array.from(form.elements)
    .filter((el) => el.willValidate && !el.checkValidity())
    .map((el) => el.name);
}

function badFields() {
  return Array.from(form.elements)
    .filter((el) => el.willValidate && !el.checkValidity())
    .map((el) => el.name);
}

Проверка willValidate здесь не для красоты: в form.elements попадают кнопки и элемент output, которые в валидации не участвуют вовсе, — без фильтра в массив полезут элементы с пустым именем. Готовый список удобно использовать для своего блока ошибок над формой.

Встроенная валидация и своя

Видеоразбор темы за 5–7 минут

Проверки, которые пишутся разметкойrequired, pattern, min и max

validityНе один флаг «плохо», а набор

setCustomValidityСвоё правило внутри общего механизма

checkValidity и reportValidityПроверить молча или показать пользователю

Свой интерфейс ошибокnovalidate забирает показ, не движок

Почему сервер проверяет зановоКлиент — удобство, сервер — истина

Итогошпаргалка по теме

Проверьте себятри быстрых вопроса

Задачидве задачи с решениями

Подтверждение пароля

Список проблемных полей