Как сделать валидатор формы на JavaScript - Form Validation с подсветкой ошибок | JS для начинающих

В этом видео создаём валидатор формы регистрации на JavaScript. Логические операторы проверяют все поля одновременно, тернарный оператор переключает статус поля на зелёный или красный, if else определяет итоговый результат. Всё работает в реальном времени через oninput. ⏱ ТАЙМКОДЫ 0:00 - Демонстрация - три поля, подсветка статуса, Form is valid 1:55 - Разбор разметки - атрибут oninput="validate" на трёх полях 3:23 - Объявляем функцию validate() 3:54 - Константы username, password, email через getElementById и .value 5:38 - Константы checkUsername, checkPassword, checkEmail, status через getElementById 8:23 - isUsernameValid - проверяем длину username минимум 3 символа 9:19 - isPasswordValid - проверяем длину password минимум 8 символов 9:46 - isEmailValid - проверяем наличие @ через includes 10:50 - Тернарный: checkUsername.className - ok если valid, error если нет 12:33 - Тернарный для иконок - галочка если valid, крестик если error 13:53 - То же самое для password и email 16:00 - isFormValid = isUsernameValid && isPasswordValid && isEmailValid 17:05 - if isFormValid - status.className = "status-valid", textContent = "✅ Form is valid" 18:19 - else - status.className = "status-invalid", textContent = "❌ Fix errors above" 19:02 - Финальная проверка - все три поля работают корректно 🔗 ИСХОДНЫЙ КОД https://www.patreon.com/TopchiyDev 📚 ПЛЕЙЛИСТЫ И КУРСЫ 📚 Полный курс JavaScript с нуля: 👉 https://www.youtube.com/playlist?list=PLIEunNjc9UyvBaTS0blaMBQYJb5GLaMXB 🚀 JS Практика - проекты с нуля: 👉 https://www.youtube.com/playlist?list=PLIEunNjc9Uyv9Xo2A-WCT0D8c1Ret6bVu 📚 Полный курс HTML с нуля: 👉 https://www.youtube.com/playlist?list=PLIEunNjc9UytoWbG_xrleyom6NfiRLBDE 📚 Полный курс CSS с нуля: 👉 https://www.youtube.com/playlist?list=PLIEunNjc9UyuznEWwwMmvjpG9V2GxG1DQ 🟦 Полный курс Flexbox CSS: 👉 https://www.patreon.com/collection/1320002 🌐 Уроки по хостингу - запуск сайта: 👉 https://www.youtube.com/playlist?list=PLIEunNjc9UyvrhTE4KC5sJK_NoeUX8ZMU 📦 Исходники кода (Patreon): 👉 https://www.patreon.com/c/topchiydev/membership 💬 СОЦИАЛЬНЫЕ СЕТИ 💬 Telegram: 👉 https://t.me/TopchiyDev 🎓 Patreon: 👉 https://www.patreon.com/TopchiyDev #javascript #formvalidation #jsпрактика #jsдлябегиннеров #webdev #frontend #программирование #валидация