JavaScript валидация форм — validity свойство у полей формы. Классовый компонент валидации форм

✏️ Напишем классовый модуль валидации форм, где используем современное свойство DOM-элементов полей ввода — validity, отражающее актуальное состояние всех возникших ошибок в поле ввода. Обсудим влияние HTML-атрибутов required, minlegnth, maxlength, pattern, title и novalidate на браузерную валидацию. Доработаем разметку формы a11y-атрибутами aria-errormessage и aria-invalid.

🔴 Timeline:
▶ 00:00​ | Введение
▶ 00:26​ | Виды валидаций форм
▶ 00:56​ | Подготовка разметки — атрибут required
▶ 01:58​ | Подготовка разметки — атрибуты minlength и maxlength
▶ 02:45​ | Подготовка разметки — атрибут pattern
▶ 03:38​ | Подготовка разметки — атрибут title в связке с pattern
▶ 04:26​ | Отключение стандартной браузерной валидации — атрибут novalidate для элемента form
▶ 04:59​ | Подготовка разметки — элементы для вывода ошибок, атрибут aria-errormessage
▶ 06:44​ | Написание JavaScript-кода валидации формы
▶ 07:14​ | Обработка события blur
▶ 09:02​ | Логика функции-обработчика события blur
▶ 12:05​ | Метод валидации поля validateField — свойство validity
▶ 22:46​ | Метод визуального управления ошибками — manageErrors
▶ 26:58​ | Улучшаем accessibility поля ввода с кастомной валидацией — атрибут aria-invalid
▶ 29:26​ | Обработка события change
▶ 32:46​ | Обработка события submit
▶ 41:45​ | Заключение

📚 Ссылки:

💬 Чат в телеграмме (помощь новичкам):

🔸 Boosty (поддержать канал):

🗂️ Бесплатные курсы на канале:

📌 Автор:

#frontend #фронтенд #js #javascript

[AleksanderLamkov]

📌 Друзья, в телеграмме у нас есть отдельный чат, где вы можете задать вопрос по фронтенд-разработке и вам постараются помочь:


Если вам это интересно, присоединяйтесь, задавайте вопросы и помогайте другим 🙂

[НурдаулетБагдаулетов-цз]

Нет ничего прекраснее, чем проснуться от уведомления о видео на твоём канале

[VyacheslavChelnokov]

Самая лучшая подача материала что я видел!!! Александр, ты супер доходчиво все рассказываешь, просто, как говорится "на пальцах"!!! Так держать!!!!

[tatyanalev]

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

[StanislavGalichev]

Узнал очень много интересного! Спасибо.

[alexdexx]

Смотрю и думаю: вот в учебный самодельный проект доски со стикерами можно же тоже было добавить валидацию как класс (я о них не знал тогда ещё), а не проверками на длину введённого текста заниматься :)

Вдруг будет интересно для контент-плана: маленькие приложения базовых вещей для отработки изученных механик на ванилле - блокнот, стикеры эти, ежедневник... Подобный контент и так имеется в сети, но уж больно хорошо излагаешь😇

[pride]

Уже закончил HTML&CSS щас повторяю CSS жду не дождусь когда же начну учить Js пару видео глянул в начале этого курсы такая имба) ❤

[Pavelius]

Этот код, просто оргазм для моих глаз... Как раз хотел переделать свою функцию валидации на класс, а то слишком много нюансов в моей функции, нет полной автоматизации

[Валиджон-зж]

Александр, отличное объяснение и реализация, но из всего вылезает один нюанс, если в input вставить больше символов чем указано в maxlength, через js или после перезагрузки восстановить значения полей из localStorage где больше символов чем надо то validity возвращает maxLength:false, то есть он не видит вставленные значения, но при ручном вводе всё работает

[СергейГород_ко]

15:50, даже я прогульщик 2ишник всё понял! 👏

[LavandaKicK]

Благодарность за уроки! Александр, где купить такую футболку?

[incidence]

ролик хороший, мало такого конечно преподносят на ютубе, собственно продвинулся по изучению уже до уровня мидла примерно но с версткой все плохо, плохо получается верстать вплане CSS стилей, можешь что нить подсказать?

[noname-oeb]

Все обработчики вешаем на document, потому что на странице форм может быть больше одной?

[ЯрославИсаков-чл]

Я пытался всеми силами убрать иконку ключа у инпута с типом пассворд. Автокомплит офф, автокомплит нью пассворд, и ничего не помогло. И вопрос, на продакшен ui kite пассворд инпута используются с типом текст, или как то можно убрать?

[МаксимНосов-фь]

а что за недоступное скрытое видео в плейлисте JavaScript ?

[alexdexx]

Столкнулся с интересной вещью, которую так и не смог разгадать сам.

Если программно задать нашему полю логина некорректное число символов (скажем, '12345678901234567890' - 20 символов при maxlength="12"), то валидация этот момент пропускает 🤔

* Замучал нейросеть вопросами и проверками 😁 Она кивает, дескать, программное изменение не триггерит события на странице. Окей, допустим, но при сабмите то всё равно походит валидация! Это для неё оказалось "нечем крыть" 😬
* Засунул в метод validateField(), однако так и не понял, как заставить его отловить -- свойство tooLong упрямо остаётся в false.
* Добавил pattern=".{3, 12}" к инпуту логина -- теперь валидацию проваливает по нему, но tooLong и ныне там (в false).

Дальше не понимаю куда копать 🙂 Видимо, кастомный костыль нужен...

Забегая вперёд: да, я пробовал на твоём коде, после того как свой поковырял. Результат тот же🤷‍♂

[foraxxx]

Александр, не могли бы вы посоветовать какой-нибудь качественный и актуальный курс по react на ютубе?