Как реализовать подсветку ошибки при вводе некорректного значения в поле ввода

Что проверяют

Для QA вопрос не про JavaScript, а про то, из чего состоит правильная валидация поля и как её проверить. Интервьюер смотрит, назовёте ли вы момент срабатывания, текст ошибки, доступность и серверную проверку. Следом просят составить набор проверок для конкретного поля, например телефона или суммы.

Как отвечать

Сначала опишите устройство, чтобы было что тестировать:

• правила: обязательность, длина, формат, диапазон. В HTML часть задаётся атрибутами required, pattern, min, max, остальное проверяется скриптом;
• момент проверки: при потере фокуса и при отправке формы. Проверка на каждый символ показывает ошибку, пока человек ещё печатает. Удачная схема: первая проверка на blur, а после ошибки поле перепроверяется на лету, чтобы подсветка ушла сразу после исправления;
• отображение: красная рамка плюс текст рядом с полем. Одного цвета мало, по WCAG информация не должна передаваться только цветом. Поле получает aria-invalid="true" и ссылку на текст ошибки через aria-describedby;
• сервер: та же проверка обязательна на бэкенде, клиентскую обходят через DevTools или прямым запросом к API.

Дальше покажите тест-дизайн: классы эквивалентности и граничные значения (для суммы от 1 до 100 000 это 0, 1, 100 000 и 100 001), пустое поле, одни пробелы, вставка из буфера, ведущие нули, кириллица в email. Проверьте, что ошибка исчезает после исправления, что форма не отправляется с невалидным полем и что фокус уходит на первое ошибочное поле.

В автотестах опирайтесь на семантику, а не на цвет: в Playwright это expect(input).toHaveAttribute("aria-invalid", "true") и видимость текста ошибки. Проверка конкретного rgb рамки ломается при каждом редизайне.

Где спотыкаются

Проверяют одно корректное и одно некорректное значение. Самые частые дефекты сидят на границах и в нестандартном вводе: пробелы, вставка, смена раскладки.

Ограничиваются интерфейсом. Если сервер принимает то, что отсекает форма, это дефект безопасности и целостности данных, а не косметика.

Не проверяют снятие ошибки. Подсветка, которая не уходит после исправления или блокирует валидную форму, раздражает сильнее, чем её отсутствие.