CSS user-invalid - псевдокласс, о котором ты не знал

🗂️ Смотри бесплатные курсы по фронтенд-разработке на канале:
🟠 Курс по HTML
🔵 Курс по CSS
🟡 Курс по JS
🟢 Курс Accessibility
⚪️ Мастер-класс по верстке для новичков
🔘 Мастер-класс по верстке для продвинутых (БЭМ, SCSS)
💬 Чат в телеграмме (помощь новичкам):
@friendlyFrontendChat
#shorts #frontend #фронтенд #css

[@AleksanderLamkov]

📌 Друзья, в телеграмме у нас есть канал и отдельный чат, где вы можете задать вопрос по фронтенд-разработке и вам постараются помочь: 💬 Чат: @friendlyFrontendChat ℹ Основной канал: @friendlyFrontend Если вам это интересно, присоединяйтесь, задавайте вопросы и помогайте другим 🙂

[@Gor0d]

user-invalid, почему мне так смешно?😂

[@memasizm]

описали клиента

[@ABtank]

А инвалиды на заморском disabled

[@hoffmann646]

Ну да, пользователь - инвалид))) неправильно конечно над этим смеяться но с высоты отработанных годов в вёрстке могу заявиться что большинство таки умственные invalid 😂

[@user-hw9cs6te5y]

Отличная информация! Спасибо большое

[@virtuoz-ru]

Не знал о таком псевдоклассе. Благодарю 👍

[@alexb.2616]

Полезно. Спасибо!

[@surizmen_8008]

Валидация на js все-равно по круче, хотя бы потому, что поддерживает технологии предков)

[@user-konan1984]

О! Не знал об этом. Спасиб

[@biscvie]

Спасибо!

[@SynPeleya]

Надо чекнуть кроссбраузерность, а так супер!

[@petrsimbakov1562]

Полезно сохраняем

[@Atractiondj]

Ошибаетесь, он ведёт себя странно. Пример поле эмайл если вы случайно ввели только название поле стало invalid, далее вы водите @m и поле стразу становится valid а не ждёт пока закончим ввод, если вводим mail. То получим invalid если вводим любой 1 символ уже valid. Но такого не будет если поле не получит сначало invalid перед valid

[@AleksanderLamkov]

Так речь же в видео про состояние user-invalid, а не просто invalid.

[@Atractiondj]

@@AleksanderLamkov наверное этот ролик лучше покажет то что я сказал, моя запись kzbin.info/www/bejne/fGWpmYesj6iZqNU

[@AleksanderLamkov]

Честно говоря, всё равно до конца проблему не понял. Слишком много обвеса в виде псевдоклассов и нестинга в примере, мозгу сложно абстрагироваться от этого 😅 Тот же has - быть может из-за него проблемы, ну, из-за сочетания user-invalid с has? Всё же браузерная поддержка has недавно начала подтягиваться, баги в различных комбинациях наверняка можно встретить.

[@AleksanderLamkov]

То, что при вводе условного "blabla@bla" состояния user-invalid не будет - это проблема не псевдокласса, а в целом дефолтной браузерной валидации полей type="email". Да даже регулярок на проверку емейла в интернете миллион, одна страшнее другой, и не все могут покрыть все встречающиеся варианты мыла. В простых паттернах (ограничение мин-макс длины, "только цифры", "только буквы") вряд ли user-invalid подведет.

[@Atractiondj]

@@AleksanderLamkov безусловно user-invalid / valid это шаг вперед и почти отказ от чего то, но я лишь поправил что она все еще имеет небольшой баг, над которым работают и вроде как будет какой то API который дополнит это и все поправит, ведь если вводить эмайл сразу ок, бага нет

[@-shakirov]

Спасибо, пару тройку условия в js поможет снести, потестирую)

[@hackyou497]

Используй замену условной логики полиморфизмом или хуки. If else хуйня

[@nojik-ejik]

да, только не думаю что она учитывает твой js и php который имеет свою валидацию

[@AleksanderLamkov]

Разумеется. Это ведь разные вещи. На ЯП валидацию в одну строку не сделаешь, а в HTML - вот, пожалуйста 🙂

[@user-kk9vl4jd5y]

Посоветуй роадмап. Хочу освоить фронт (пока только html+css). Есть готовый сайт, но очень криво свёрстанный: море css файлов, стили в html, очень часто использованный important и т.д. Хочу переписать фронт этого сайта самостоятельно. Так вот, каким путём пойти, что почитать, посмотреть, какими ресурсами лучше пользоваться и т.д.? Буду благодарен за любые советы!

[@AleksanderLamkov]

Привет! Посмотри это: kzbin.info/www/bejne/Z4i1e36drNGLb9ksi=gPgxaa0l_gsv2oqR - и подучи то, чего не хватает.

[@user-kk9vl4jd5y]

@@AleksanderLamkov спасибо за оперативный ответ! Обязательно ознакомлюсь.

[@Fluxdeken]

Полезно

[@Sergey_Klimov]

Но сейчас по-любому какая нибудь плохая поддержка у таких дурацких браузеров по типу safari

[@AleksanderLamkov]

Парадоксально, но нет, у всех браузеров хорошая поддержка :)

[@leandrmiklashevich297]

инвАлид... да что ж ты будешь делать((

[@AleksanderLamkov]

Так. Просвети. Как надо?

[@spamfolder4985]

​@@AleksanderLamkov юзер инвалИд конечно

[@AleksanderLamkov]

Озвучка в яндекс и гугл переводчике делает ударение на А.

[@spamfolder4985]

@@AleksanderLamkov кругом обман

[@leandrmiklashevich297]

​@@AleksanderLamkov привет. Слово invalid произносится в английском языке через звук æ. В русском его нет. Что-то среднее между а, э и е, но с широко открытым ртом.. Это тот же звук, что и в словах and, add, back, thanks и т.д. Мне кажется правильней произносить слово invalid, как [инвЭлид]. Ведь в вышеприведённых словах, когда мы произносим их "по-русски" мы говорим "энд, эд, бэк, сэнкс". Кстати, хорошо произносишь height, как "хайт", а не "хейт". Круто. Сколько я этого наслушался у разрабов из наших широт.

[@ListenFight]

Ни-че-го себе!!!! Без логики в js, просто стилями? А как он определяет 8 символов? А можно изменить количество?

[@AleksanderLamkov]

Атрибутами minlength и maxlength можно задать необходимые правила. А ещё есть pattern, так там вообще любую регулярку можно прокинуть.

[@user-pt2uz5st7i]

Кто пробовал как работать на практике в сафари?

[@AleksanderLamkov]

У Safari отличная поддержка этого псевдокласса.

[@ddrdeveloper]

удобная валидация нативными средствами??? Чем же она удобная? Никакой кастомизации. Это просто баловство. Ты вот лучше сними ролик, как нормальную валидацию оформить - вот это будет реально круто. Конечно, в формат шортс вряд ли поместится, но оно того стоит.

[@user-lq7xz1th4x]

Главное чтобы программист был не инвалид, юзер то ладно

[@maksimrugalov3158]

Так invalid используют вместе с valid

[@AleksanderLamkov]

Да, обычно в такой связке, но что invalid, что valid - не очень удобно работают. Состояния user-invalid и user-valid будут получше отрабатывать в большинстве ситуаций.

[@sesil2459]

Лол, не js валидция, шобы шо)

[@mikhaildolgov]

Канал отличный и ты молодец. Но если есть возможноть давать информацию не СКОРОГОВОРКАМИ было бы круто т.к. было бы гораздо понятнее и усваивалось качественнее. Заранее благодарен.

[@AleksanderLamkov]

Привет! В формате видео Shorts вынужден умещать информацию в минуту. Вовсе отказаться от такого формата видео в пользу длинных, где нет ограничений по таймингу, я не могу, т. к. основной трафик новой аудитории как раз за счет шортсов приходит.

[@-shakirov]

@@AleksanderLamkovпопробуй на микро получше записаться, чтоб не было призвуков шипящих или де эссер использовать, тогда скороговорки не будут сильно слух резать. А формат рилсов не мешало бы чутка поднять 😀 ВК тоже только вертикальные клипики залетают)

[@AleksanderLamkov]

​@@-shakirov в смысле "на микро получше"? Я взял топовый микрофон в своей ценовой категории до 100к рублей. Неужели такой уж плохой звук? Про DeEsser интересная мысль. Вроде как в Adobe Premiere это есть, попробую добавить, спасибо :)

[@AleksanderLamkov]

@@-shakirov И что имеется в виду под "формат рилсов не мешало бы чутка поднять"? Есть какие-то идеи и предложения по поводу шортсов на канале?) Буду рад услышать критику и советы.

[@-shakirov]

@@AleksanderLamkov тогда по обработке от шипящих с можно пощелкать на посте

[@geek_muslim]

всё же лучше использовать джс для валидации формы, а не углубляться так глубако в хтмл цсс

[@MaximMaksim321]

Зачем ваш CSS, если есть тот же самый JS, с ним это проще делается

[@AleksanderLamkov]

Унифицированный функционал, включающийся одним атрибутом и парой строчек стилей. В JS же валидация никогда не бывает простой.

[@user-iw9ct2kk6s]

С каких курсов пришел ?

[@user-ho6uo2ch3n]

Ну-ка ну-ка давайте забабахай нам на js покажи мастер класс

[@sh0ny]

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

[@Prolaps-us]

@@user-ho6uo2ch3n а в чём собственно говоря проблема? ну вот небольшой пример: form.inputs.name.validate = function() { return this.value.length > 2; } form.inputs.name.onchange = function() { if (this.validate()) { this.classList.remove("invalid"); } else { this.classList.add("invalid"); } } потом накидываем на него css стиль с красной рамкой и туллтипом и радуемся жизни. Один фиг стандартные input types почти не юзаются в реальных проектах, ибо их тяжело а некоторые даже невозможно стилизовать. Да и поля для ввода бывают комплексные, например такие как в tagify.js Так что толку от псевдокласов и встроенной валидации нет, в любом из случаев вам придётся писать скрипт - если ваш проект это не просто форма для ввода email и пароля.