Валидация формы на чистом Javascript

  Рет қаралды 28,574

Александр Дудукало

Александр Дудукало

Жыл бұрын

Делаем проверку и отправку формы на Javascript без использования плагинов и библиотек.
👁‍🗨 Исходники на моем телеграм канале: t.me/frontend_du2
👁‍🗨 Discord сервер: / discord
👁‍🗨 VK: frontend_du2
👁‍🗨 Дзен: dzen.ru/frontend_it
Спасибо за вашу поддерджку :)

Пікірлер: 181
@user-wq4mh7li2t
@user-wq4mh7li2t Ай бұрын
Атрибут defer в JavaScript используется для отложенной загрузки скрипта. Когда вы добавляете атрибут defer к тегу , скрипт будет загружен параллельно с загрузкой HTML-документа, но выполнение скрипта будет отложено до тех пор, пока весь HTML-документ не будет полностью загружен. Это означает, что скрипт, помеченный атрибутом defer, не будет блокировать загрузку остальной части страницы. Это особенно полезно, когда у вас есть скрипты, которые необходимо загрузить до того, как страница будет полностью интерактивной, но они не влияют на начальную загрузку контента или отображение страницы.
@Tema_ilit
@Tema_ilit 11 ай бұрын
Саша не говори себе делать короткие видео, то что ты записываешь очень понятно и доступно к пониманию, благодаря твоим видео начал на уровень прямо лучше разбираться во всем, много чего уже посмотрел, не останавливайся
@alex_dudukalo
@alex_dudukalo 11 ай бұрын
Думаю, ты прав :) Спасибо за это сообщение. Буду делать приоритет на содержании, несмотря на время :) Можно, конечно на угоду ютубу и просмотрам делать видео короче, что бы оно чаще попадало в рекомендации, но кажется - это не лучший путь для самого контента )
@Tema_ilit
@Tema_ilit 11 ай бұрын
@@alex_dudukalo Привет, решать конечно только тебе, но ведь есть тайм коды, если кто то более прошареный, он может простой перейти на тот момент, который ему нужен, а те, кто менее разбираются в теме будут смотреть до конца, в любом случае записывая длинные видео с подробным объяснением ты удовлетворяешь обе стороны так сказать, у тебя правда талант, может быть не к слову, но я в школе очень плохо понимал математику до 9 класса, ну не получалось и все, вообще никак, позже в 9 классе у нас сменился преподаватель и за тот год, который она меня учила, я сделал огромный скачок в математических знаниях, и даже сдал экзамен на 4 не списывая, и это я все к тому, что ты тот человек, которого хочется слушать и у которого получается донести суть, возможно потому, что ты пишешь видео с минимальными склейками, и что то гуглишь в процессе, возможно потому, что у тебя тоже есть ошибки и ты их не вырезаешь, а показываешь как выглядит написание кода на самом деле, не могу точно, сказать, что именно делает твои видео такими классными. вероятно все вместе взятое, я перечислил лишь малость, моментов, но главное не останавливайся, благодаря твоим видео я даже начал немного любить JS, потому что до этого все было безуспешно и я не понимал как с ним работать, спасибо тебе
@alex_dudukalo
@alex_dudukalo 11 ай бұрын
@@Tema_ilit Привет, прочитал сообщение. Да, согласен. Я так же встречал такое в школе и университете. Я убежденно считаю, что учитель (если в слово учитель включить обобщенное понятие) - человек, который может разжечь в ученике желание заниматься изучением темы и предмета. Заинтересовать его так, что бы он сам хотел изучать, капать и находить ответы. Я стремлюсь к этому. Хочу быть именно таким учителем. Спасибо тебе за эти слова. Именно такие комментарии ориентируют меня и судя по ним я движусь в верном направлении. По крайней мере надеюсь на это. Я рад, что вы написали это сообщение.
@makeuppolina
@makeuppolina Жыл бұрын
Спасибо большое за такое полезное видео! Вы, как всегда, все четко и понятно объяснили и разложили по полочкам👍👍👍Мне очень нравится ваша манера подачи материал - легкая и непринужденная (еще и с юмором))). Ваши видео помогают в обучении👍
@alex_dudukalo
@alex_dudukalo Жыл бұрын
Большое вам спасибо ) Безумно приятно читать такие отзывы ) Ваши комментарии вдохновляют на записи новых видео :)
@jugadoor
@jugadoor Жыл бұрын
Все отлично, огромное спасибо за видео! Есть только один нюанс (для меня) - это музыка на фоне, посмотрел уже больше 10 видео на канале и те, что без музыки (либо без такой громкой музыки) воспринимались проще)
@alex_dudukalo
@alex_dudukalo Жыл бұрын
Спасибо за комментарий. Про фоновую музыку очен важно было получить мнение. Мне хотелось музыкой немного разбавить атмосферу и сделать восприятие более легче. Но видимо это только мешает. Буду что то придумывать или полностью убирать в следующих видео музыку :) спасибо за полезный коммент
@jugadoor
@jugadoor Жыл бұрын
Повторюсь, наверное, если ее немного убавить, то она не будет перебивать основные мысли) посмотрим в следующих видео)
@syuzannanasukhova5777
@syuzannanasukhova5777 Жыл бұрын
Ставлю лайк и подписываюсь!) Очень классно рассказываешь, делая акценты на важных моментах!)
@ssswi_feast
@ssswi_feast 8 күн бұрын
Поизучаю твои видео обязательно. Вроде у же так и верстаю с пол года. А все равно на мелочах то с бургером сыплюсь то еще с чем нибудь! Респект тебе снимай побольше таких видосов!!
@alex_dudukalo
@alex_dudukalo 7 күн бұрын
Очень приятно получать такие комментарии 😇 спасибо
@user-zo6rp1xn8i
@user-zo6rp1xn8i Жыл бұрын
Александр, вот и добралась до валидации формы!! Лайк и сердечко, как всегда, вашим видео!❤
@alex_dudukalo
@alex_dudukalo Жыл бұрын
Спасибо, что оценили ролик и поддержали меня :) Будем работать и стараться)
@user-zd6ji8wd2s
@user-zd6ji8wd2s 5 ай бұрын
Александр, большое спасибо за подробное видео!!! Спасибо, что понятным языком все объясняете! Вы даете надежду, что все возможно)))
@user-zo6rp1xn8i
@user-zo6rp1xn8i 10 ай бұрын
Смотрю в 105й раз!!! Повторение - мать Учения😀😀😀Спасибо!!!
@alex_dudukalo
@alex_dudukalo 10 ай бұрын
Спасибо за такой комментарий🙈 это очень вдохновляет и мотивирует на новые видео 🤗
@molniagrom3599
@molniagrom3599 Ай бұрын
Всё очень доступно👍 На будущее, как частый зритель таких видео, говорю что очень удобно использовать тайм-коды, а не искать если что-то нужно конкретное перематывая всё видео...
@JennyAirAround
@JennyAirAround Жыл бұрын
Александр, спасибо большое!! Буквально, недавно, настроение учебное пошло на спад, вдохновения нет, и тут Ваше видео с материалом, который только изучила и забыла (как это обычно происходит), начала смотреть и не смогла оторваться, видео больше 30 мин, но зашло, как мороженое. Там и другие Ваши произведения были просмотрены. Это очень здорово! Особенная благодарность за Вашу открытость - не бояться косяков и ошибок, за самопроверку, хоть наглядно показали куда "тыкать" (как начинающий, позволяю себе это слово). После просмотра ваших уроков по ранее усвоенному материалу - всё встает на свои места. Начинающим - обязательно к просмотру.
@alex_dudukalo
@alex_dudukalo Жыл бұрын
Спасибо за ваш приятнейший комментарий. Я читаю и улыбаюсь от того, как я рад, что могу помочь роликами)) Значит работаю не зря) Спасибо вам еще раз
@vladlesun3811
@vladlesun3811 Жыл бұрын
Александр, вы как всегда, четко, быстро, интересно и понятно, спасибо большое 🫡
@alex_dudukalo
@alex_dudukalo Жыл бұрын
Большое спасибо за ваш комментарий :) Очень приятно. Не смог оперативно ответить на комментарий :(
@user-ct3ui6yc4l
@user-ct3ui6yc4l 11 ай бұрын
Огромное спасибо за обучающий материал, легко воспринимается, очень полезное видео! :)
@alex_dudukalo
@alex_dudukalo 11 ай бұрын
Спасибо вам ) Рад, что ролики для вас полезны. Бубу стараться
@followmagnus9775
@followmagnus9775 3 ай бұрын
Отличное обучающее видео, долго сидел сам мучился как написать валидацию, посмотрел видео и разобрался. Спасибо большое!
@user-ch6ot6bc8q
@user-ch6ot6bc8q 11 ай бұрын
Очень долго искал пытался решить проблему с отправкой формы после валидации, в этом ролике я нашел кк можно решить мою проблему. Спасибо Вам большое за подробное и понятное видео ! Успехов Вашему каналу
@alex_dudukalo
@alex_dudukalo 11 ай бұрын
Спасибо вам за сообщение с мнением. Я рад, что у вас получилось найти решение проблемы в этом видео :) Старался максимально больше вложить информации в ролик ) Спасибо вам
@relaxdeepsleepmusic3608
@relaxdeepsleepmusic3608 Жыл бұрын
Классное видео, очень помогло, спасибо.
@myaushenka
@myaushenka Жыл бұрын
Спасибо! Мне очень помогло это видео, так как понадобилось сделать фронтенд часть, а я в ней плохо разбираюсь. Подпишусь в поддержку вашего канала)
@andrei_dvelx
@andrei_dvelx Жыл бұрын
Отличное объяснение) по-моему даже проще, чем библиотекой пользоваться
@alex_dudukalo
@alex_dudukalo Жыл бұрын
Да да, раньше это было сделать сложнее. Приходилось писать код. Следить за прокруткой страницы. Делать вычисления. Это свойство все упростило ))
@lemexaxa
@lemexaxa Жыл бұрын
Очень доступно объясняете. Спасибо)))
@alex_dudukalo
@alex_dudukalo Жыл бұрын
Сергей, спасибо за комментарий. Очень приятно, что вы смотрите ролики. :) Возможно информация пригодится где то )
@vzrosly_muzik
@vzrosly_muzik Жыл бұрын
Не часто я оставляю комментарии, но тебе оставлю, спасибо за видео, тебя очень приятно смотреть!
@alex_dudukalo
@alex_dudukalo Жыл бұрын
Спасибо вам за комментарий и, за то что решили помочь. Отклики реально помогают и я вижу это в статистике. Буду стараться еще лучше))
@artyaexe
@artyaexe Жыл бұрын
Попрошу скиллбокс , чтобы тебя сделали моим куратором 😂👍🏽 спасибо за инфу )
@alex_dudukalo
@alex_dudukalo Жыл бұрын
Да, конечно. Буду рад с вами поработать на курсе :)
@elenaizmaylova9331
@elenaizmaylova9331 6 ай бұрын
Александр, вы просто супер! Видео очень полезное и вы очень приятный человек) Спасибо за ваш труд!)
@alex_dudukalo
@alex_dudukalo 6 ай бұрын
Спасибо большое за ваш комментарий и такие приятные слова ☺ ваша поддержка вдохновляет на новые видео 🔥
@risenshine1349
@risenshine1349 Жыл бұрын
спасибо большое за такие полезные видео! лайк и коммент для продвижения и улыбки))
@alex_dudukalo
@alex_dudukalo Жыл бұрын
Это вам большое спасибо :) Улыбка точно есть. Надеюсь и продвижение будет. Хорошего вечера :)
@user-hc7wq9om9i
@user-hc7wq9om9i Жыл бұрын
Спасибо большое Вам за видео полезное, очень интересно!👍👍👍
@alex_dudukalo
@alex_dudukalo Жыл бұрын
Большое спасибо вам :)
@Alex__88
@Alex__88 3 ай бұрын
Полезное видео. Спасибо.
@user-hc7wq9om9i
@user-hc7wq9om9i Жыл бұрын
Спасибо большое!
@typhoonx04
@typhoonx04 Жыл бұрын
Хорошая тема, спасибо Александр!
@alex_dudukalo
@alex_dudukalo Жыл бұрын
Давно планировал записать видео про валидацию. Уверен, что она понадобится в многих проектах :)
@nikitachuzhaykin
@nikitachuzhaykin Жыл бұрын
500 лайк мой) Спасибо за видео!
@alex_dudukalo
@alex_dudukalo Жыл бұрын
Спасибо, очень приятно ))
@Vt_Shabanoff
@Vt_Shabanoff 9 ай бұрын
Александр, спасибо огромное за такие классные видосы. Круто если б еще валидацию формы даты можно было бы рассмотреть.
@alex_dudukalo
@alex_dudukalo 9 ай бұрын
Спасибо вам :) Записал ваше предложение себе в список роликов для записи. Такое видео в плане :) Спасибо
@yuriydoychev5857
@yuriydoychev5857 2 ай бұрын
Спасибо за это видео. Хорошо объясняете. Заходит.
@alex_dudukalo
@alex_dudukalo 2 ай бұрын
Спасибо за ваш комментарий :) Я очень рад, что видео нравится)) Старался
@mambetaa3486
@mambetaa3486 Жыл бұрын
Спасибо Александр!
@alex_dudukalo
@alex_dudukalo Жыл бұрын
Спасибо вам за вашу поддержку :)
@user-lm9ee1gn5p
@user-lm9ee1gn5p Жыл бұрын
Спасибо, супер полезно, ждем новый контент 👍
@alex_dudukalo
@alex_dudukalo Жыл бұрын
Спасибо за отклик. Такие комментарии мотивируют на работу )
@escobar929
@escobar929 3 ай бұрын
просто красава!!спасибо мужик!!! можно, пожалуйста еще практического приминения js!!
@sergmalin210
@sergmalin210 7 ай бұрын
Спасибо, молодец, было очень полезно для меня и понятно
@alex_dudukalo
@alex_dudukalo 7 ай бұрын
Спасибо за ваш комментарий🤗
@Elena.S.
@Elena.S. Жыл бұрын
Алесандр, спасибо за видео!
@alex_dudukalo
@alex_dudukalo Жыл бұрын
Спасибо вам за вашу поддержку :)
@user-uu9mc1xq1o
@user-uu9mc1xq1o Жыл бұрын
Спасибо за видео! Лайк, подписка, комментарий)
@alex_dudukalo
@alex_dudukalo Жыл бұрын
Спасибо за ваш комментарий и поддержку. С наступающим новым годом :)
@user-mr2hs4rg2g
@user-mr2hs4rg2g 9 ай бұрын
отличное видео! спасибо :)
@alex_dudukalo
@alex_dudukalo 9 ай бұрын
Спасибо за ваш комментарий 😊
@timkri0
@timkri0 Жыл бұрын
Спасибо за видео !
@alex_dudukalo
@alex_dudukalo Жыл бұрын
Спасибо за вашу поддержку )
@arseniyklimovich8409
@arseniyklimovich8409 9 ай бұрын
Спасибо, брат, очень помог
@alex_dudukalo
@alex_dudukalo 8 ай бұрын
Спасибо за отзыв 💪
@user-tg2qt7em4t
@user-tg2qt7em4t 8 ай бұрын
Александр, спасибо за понятное видео! Data - атрибуты очень интересная тема, было бы здорово посмотреть
@alex_dudukalo
@alex_dudukalo 8 ай бұрын
Здравствуйте, Ольга. Спасибо за ваш комментарий. Да-да, уже такой ролик есть. Если будет время и желание, обязательно посмотрите :) kzfaq.info/get/bejne/optiqcWEta25ops.html
@user-vp6bu3fg1o
@user-vp6bu3fg1o Жыл бұрын
Мне понравилось)) лайк лайк
@alex_dudukalo
@alex_dudukalo Жыл бұрын
Спасибо вам за поддержку лайком :)
@Tosha.V
@Tosha.V Жыл бұрын
Подача материала и картинка понравились - продолжай в том же духе! Как вариант новые темы - телефонный справочник, веб форма с валидацией и отправкой к примеру в Google Sheets (аналог Google Форм) думаю многим было бы интересно)
@alex_dudukalo
@alex_dudukalo Жыл бұрын
Большое спасибо за поддержку и комментарий. Кстати, на счет справочника отличная идея :) Добавляю себе в список записи видео ))
@Tilda_Practice
@Tilda_Practice Жыл бұрын
Спасибо !!! было бы классно если бы вы записали видео еще и про это : При потере фокуса (событие blur, происходит, когда пользователь убрал выделение с поля для ввода) должна происходить проверка на корректность введённого значения и замена его на корректное при необходимости по следующим правилам: Из строки значения должны удаляться все символы, кроме допустимых. Пробелы и дефисы в начале и конце значения должны удаляться. Несколько идущих подряд пробелов или дефисов должны заменяться на один. Первая буква должна приводиться к верхнему регистру, а все остальные - к нижнему. Отправка формы должна добавлять абзац с введёнными фамилией, именем и отчеством под форму без перезагрузки страницы. Каждая отправка формы добавляет новый абзац на страницу. После отправки поля на форме должны очищаться.
@alex_dudukalo
@alex_dudukalo Жыл бұрын
Спасибо вам за отклик. Да, кажется это те проверки, которые указаны в задании 1 продвинутого уровня по JS. В этом ролике хотел показать базовый способ валидации. С продвинутым (который показали вы) дела интереснее. Думаю, что можно в будущем записать такой ролик :) Спасибо вам и с наступившим Новым Годом :)
@user-ub8jf6ok9b
@user-ub8jf6ok9b Жыл бұрын
Алесандр, спасибо за видео! Все круто и понятно, писала как всегда с вами! Были в процессе вопросы, но вы потом на все отвечали, единственное не совсем поняла это работа с методом contains() - при создании функции для очистки ошибок при повторной валидации.
@alex_dudukalo
@alex_dudukalo Жыл бұрын
Спасибо за ваш комментарий и поддержку. Очень приятно, что видео было для вас полезным. Тут дело в следующем. При повторной запуске проверки валидации нам нужно удалить старые сообщения об ошибках. Если они там есть, то проблем не будет. Но если ошибки у поля не было и мы пытаемся ее удалить, то у нас появится ошибка, что элемент не существут. Поэтому мы проверяем наличие класса ошибки. contains возвращает true, если у элемента есть указанный класс. Если он есть, значить можно смело делать удаление :)
@dezmos6389
@dezmos6389 Жыл бұрын
Отличное видео! Насчет фоновой музыки полностью согласен с предыдущим автором ;)
@alex_dudukalo
@alex_dudukalo Жыл бұрын
Спасибо за комментарий и поддержку. Про музыку мне было важно узнать. Буду исправлять и учитывать это :) Спасибо
@user-gf2io4bf3k
@user-gf2io4bf3k 8 ай бұрын
Классно!
@alex_dudukalo
@alex_dudukalo 8 ай бұрын
Спасибо 🔥 надеюсь и другие видео канала будут вам полезны))
@khumoyunrakhimov8909
@khumoyunrakhimov8909 Жыл бұрын
Давно искал видео где validaiton делается чисто на Javascript. Наконец-то нашёл ). Всё объяснено чётко и понятно. Уважение к тебе и продолжай в том же духе. Обязательно подписка, лайк и комментарий. Одна просьба, можешь делать видео где делается validation на определённый input.value который проверяет на уникальность среди данных в базе данных(mysql). Заранее спасибо.
@alex_dudukalo
@alex_dudukalo Жыл бұрын
Большое спасибо за ваш комментарий и поддержку в виде подписки и комментария. Да, понимаю вас. Сам когда то искал такие примеры. У меня как раз запланирован такой материал для записи. Думаю скоро сделаю ролик с валидацией пароля или логина (связка с сервером) это интересный пример :)
@khumoyunrakhimov8909
@khumoyunrakhimov8909 Жыл бұрын
@@alex_dudukalo да очень интересный и нужный материал будет, буду ждать )
@andreyfedyukin8360
@andreyfedyukin8360 Жыл бұрын
Спасибо 👍
@alex_dudukalo
@alex_dudukalo Жыл бұрын
Спасибо вам )
@Sanychish
@Sanychish Жыл бұрын
Спасибо!
@alex_dudukalo
@alex_dudukalo Жыл бұрын
И вам :)
@Aelita042
@Aelita042 21 күн бұрын
Ахах, так смешно про лайки и комментарии сказали)) лайк и коммент ❤
@ssr.1989
@ssr.1989 8 ай бұрын
Спасибо большое, Александр! Для диплома хочу применить без подключения сторонних библиотек.
@alex_dudukalo
@alex_dudukalo 8 ай бұрын
Спасибо за ваш комментарий🤗 желаю удачи на защите диплома 🍀
@13101997a1
@13101997a1 Ай бұрын
Лучший видеоурок про валидацию формы. Спасибо Про тайм коды писали ниже, подумайте. Действительно будет полезно)
@alex_dudukalo
@alex_dudukalo Ай бұрын
Большое спасибо, очень приятно читать такие комментарии. Это очень мотивирует 😇
@user-gx3ke4it4r
@user-gx3ke4it4r Ай бұрын
Александр! Я прям увлекся вашим видеоуроками, не пропускаю ни одного. Ссылки на адреса ваших роликов коллекционирую и храню в своем электронном конспекте, как большую ценность в копилке знаний по js. Спасибо огромное за ваш неоценимый вклад в развитие, ни сколько не преувеличивая, в развитие IT-технологий в стране! С уважением, Михаил!
@Vt_Shabanoff
@Vt_Shabanoff 7 ай бұрын
Александр, хотелось бы от Вас видео про часть валидации такой как маска под номер телефона, очень популярная тема сейчас
@user-rx9lo2kl7k
@user-rx9lo2kl7k 6 ай бұрын
Она была популярной ещё лет 10 назад
@megabulk
@megabulk Жыл бұрын
Ещё раз поразился отсутствию склеек (кроем той что в начале) и одновременно четкости речи и объяснения!
@alex_dudukalo
@alex_dudukalo Жыл бұрын
Да, это видео получилось сделать целым без склейки. Но это не лучшая практика ) Много лишнего ):
@user-lj3kp8ll6h
@user-lj3kp8ll6h Жыл бұрын
Было бы отлично, чтобы вы записали видео по data-атрибутам)
@alex_dudukalo
@alex_dudukalo Жыл бұрын
Уже есть, сегодня выложил. Благодаря вашей рекомендации записал :) kzfaq.info/get/bejne/optiqcWEta25ops.html
@baileysli6235
@baileysli6235 Жыл бұрын
Советую ознакомиться с validity у элементов форм. Многие проверки браузер уже делает из коробки
@alex_dudukalo
@alex_dudukalo Жыл бұрын
Да, тоже способ. Но часто в практике есть необходимость сделать свою валидацию с уникальными правилами проверок полей )
@andreyryzhykov9713
@andreyryzhykov9713 Жыл бұрын
братик лайкнул подписался
@alex_dudukalo
@alex_dudukalo Жыл бұрын
Спасибо за лайк и поддержку :) Это супер приятно и помогает каналу ):
@szyrwel
@szyrwel Жыл бұрын
Лайк, подписка, комментарий - всё как и просил)
@alex_dudukalo
@alex_dudukalo Жыл бұрын
Спасибо за вашу поддержку :) Мне это очень помогает :)
@tipOdessa
@tipOdessa Жыл бұрын
Здравствуйте! Очень круто! Но я бы еще метод trim() впихнул, он удалит все пробелы
@alex_dudukalo
@alex_dudukalo Жыл бұрын
Да да, этот метод бы помог убрать лишние пробелы ) Не пришло в голову во время записи видео :) Спасибо
@user-ey3uh4un1s
@user-ey3uh4un1s 5 ай бұрын
Если коротко, это очень круто и понятно, спасибо!
@alex_dudukalo
@alex_dudukalo 5 ай бұрын
Спасибо за обратную связь 🤗
@enterkvas
@enterkvas 7 ай бұрын
Здравствуйте, Александр! Огромное спасибо за контент! Я не силен пока в js. Я тут поработал над index.js в плане dry. Получилось как-то так. Здесь вставляю только кусок, который я переработал, начиная с: for(const input of allInputs){ по: } return result } невключительно: if(input.minLength || input.maxLength){ removeError(input) if(input.value == ''){ createError(input, 'The field is not filled') result = false } else if(input.value.length < input.dataset.minLength){ createError(input, `The minimum number of characters: ${input.dataset.minLength}`) result = false } else if(input.value.length > input.dataset.maxLength){ createError(input, `The maximum number of characters: ${input.dataset.maxLength}`) result = false } else if(input.dataset.required){ result = false } } Проверял, вроде как работает. Но, возможно, есть какие-либо неточности, или "подводные камни"? Или, если работает, то нормально?
@alex_dudukalo
@alex_dudukalo 7 ай бұрын
Здравствуйте, Александр. Спасибо вам за такой приятный комментарий. Я рад, что видео было для вас полезным :) Кажется, что в коде все хорошо. Единственное, я бы предложил использовать тройное === вместо двойного :) И в этой строчке не хватает кавычки if(input.value == ''){
@enterkvas
@enterkvas 7 ай бұрын
Большое спасибо вам, Александр, за код ревью! Хороший для меня урок по внимательному отношению к делу. Читаю сейчас "Идеальный программист" Роберта Мартина. Сразу вспоминается понятие "профессионализм". Еще раз большое спасибо вам, Александр! Успехов! P.S. ксатати, хорошая тема найти по различию между разными операторами "=", "==" и "===".@@alex_dudukalo
@enterkvas
@enterkvas 7 ай бұрын
Александр, приветствую! Я много посвятил сегодня времени (незапланированного) изучению операторов "=", "==" и "===" (в основном по книге "Java Script подробное руководство" 5-е издание. Автор: Дэвид Флэнаган и по некоторым другим источникам). Конечно, я не смог сразу разобраться во ВСЕХ тонкостях этих операторов. Но, продолжая работу со скриптом вашего текущего ролика, хотелось бы услышать, хотя бы очень коротко, обоснование вашей рекомендации в if(input.value == ''){ ... в условии писать "===" а не "==". @@alex_dudukalo
@justfisher2920
@justfisher2920 Жыл бұрын
Атрибут defer запускает скрипт асинхронно, его можно разместить где угодно, хоть выше хоть ниже
@alex_dudukalo
@alex_dudukalo Жыл бұрын
Согласен с вами😇
@azerqgaming
@azerqgaming 10 ай бұрын
Александр, спасибо за видео, я сам backend c# разработчик, работаю много с БД, и всякими околосистемными штуками, но паралельно интересуюсь и фронтендом, очень понравился фреймворк React.js + Typescript, но и vanilla js тоже норм, для своих задач, как относитесь к нему и подобным фреймворкам (vue, angular, etc...) ?
@alex_dudukalo
@alex_dudukalo 10 ай бұрын
Здравствуйте, Антон. Спасибо за ваш комментарий и интересный вопрос. Фреймворки, коими являются Vue, React и другие - это крутые инструмент, которые сильно упрощают разработку веб-приложений (особенно больших) Сильно упрощают и оптимизируют. Отношусь к ним очень положительно, но всегда помню о том, что фреймворк для JS работает на Javascript и для того, что бы их эффективно использовать, нужно знать хорошо JS. Поэтому всегда рекомендую начать изучат фронтент с JS. Вы уже знаете языки программирования, поэтому вам будет проще ))
@azerqgaming
@azerqgaming 10 ай бұрын
@@alex_dudukalo спасибо за ответ, я уже в принципе сейчас знаю JS, на базовом уровне, начал разбираться с вёрсткой на flexbox и Grid, пробовал tailwind и Material UI, мне прям доставляет некоторое удовольствие видеть одну систему с разных сторон, как со стороны UI, так и со стороны внутренностей сервисов, API, хранилища, модулей система, да даже некоторые задачи DevOps интересны, так что программирование это одновременно увлечение и работа, радует для себя открывать что-то новое)
@user-yp2tx6vy6y
@user-yp2tx6vy6y 7 ай бұрын
Здравствуйте. А может возникнуть конфликт, если изначально в input поставили value, я имею ввиду в HTML?
@nocomments5529
@nocomments5529 4 ай бұрын
Хорошие у вас уроки, смотрел несколько, интересно. Делал валидацию с помощью ивент focus/blur, код получается меньше.
@LoveSkill_69
@LoveSkill_69 Жыл бұрын
И почему, например, если у меня форма в модальном окне, я не могу после preventDefault() закрыть её никаким способом?
@yurckov
@yurckov 4 ай бұрын
Привет. У меня страница примерно такая же но еще есть checkbox на согласие снизу. Весь интернет облазил и никак не могу найти как сделать еще и для чек бокса на ванильном js. Буду признателен за помощь
@LoveSkill_69
@LoveSkill_69 Жыл бұрын
Очень полезный материал! А как сделать так чтобы валидация была сразу на нескольких формах (они одинаковые). У меня ошибка возникает на этапе, где в функции валидации выводится в консоль сам элемент form. 7:18
@webdmitriev
@webdmitriev Жыл бұрын
Спасибо, с номером телефона бы ещё посмотреть)
@alex_dudukalo
@alex_dudukalo Жыл бұрын
С телефоном чуть сложнее. Обычно валидацию с номером телефона делают с маской. Тут придется подключать библиотеку дополнительную, что не очень хочется делать ) Но, как идея для реализации видео хорошая
@bikadV
@bikadV 4 ай бұрын
Зачем в if(validation(this)) добавлять "== true" если if и так возвращает только true/false на любое условие в скобках?
@user-tg5kb4mn9p
@user-tg5kb4mn9p 6 ай бұрын
Добрый вечер! Подскажите, а можно зашифровать данные при отправке на почту?
@user-xz6kl7vo1i
@user-xz6kl7vo1i 7 ай бұрын
Спасибо, хорошо объяснил)) 👍 Подскажи как сделать подсветку слов в вс коде как у тебя ?)) Чтоб querySelector жёлтым, form оранжевым и тд)
@alex_dudukalo
@alex_dudukalo 7 ай бұрын
Спасибо за ваш комментарий. Вы можете в настройках текущей темы выбрать тему Monokai и тогда у вас будет такое же оформление :)
@user-xz6kl7vo1i
@user-xz6kl7vo1i 7 ай бұрын
@@alex_dudukalo спасибо)
@user-xz6kl7vo1i
@user-xz6kl7vo1i 7 ай бұрын
@@alex_dudukalo спасибо)
@ssswi_feast
@ssswi_feast 8 күн бұрын
Красава спасибо! Всегда с етой валидацией проблема.То Pristine подключу запутаюсь..То еще что нибудь. Твое видео малость поставило на свои места.Мы можем и усложнять ведь код внося поправки на маски или рег.выражения??
@alex_dudukalo
@alex_dudukalo 7 күн бұрын
Рад, что видео было для вас полезным. Да, конечно. Вы можете дополнять код и делать его лучше :)
@tigrext20
@tigrext20 Жыл бұрын
Вопрос возник. Лучше использовать цикл for of или for each? Что выполняется быстрее или нет разницы?
@alex_dudukalo
@alex_dudukalo Жыл бұрын
Если вы работаете с массивом DOM элементов, например использую функцию querySelectorAll, то думаю удобнее сразу использовать forEach? Этот даст возможность делать такие приемы. document.querySelectorAll('*').forEach(el=>{console.log(el);}) В других случаях, если счетчик не нужен, удобно использовать for of
@i5anin
@i5anin Жыл бұрын
Как выполнить 2? 1. все поля обязательны для заполнения после применения к значению метода trim() 2. дата рождения находится в диапазоне от 01.01.1900 до текущей даты 3. год начала обучения находится в диапазоне от 2000-го до текущего года
@alex_dudukalo
@alex_dudukalo Жыл бұрын
Тут нужно добавить новые условия проверки ), как например с maxLength. Кажется у же отвечал на платформе вам? или я ошибаюсь ? :)
@aleksandrkozowski9717
@aleksandrkozowski9717 3 ай бұрын
🍉
@user-sh1ro8bg5l
@user-sh1ro8bg5l Жыл бұрын
Классное объяснение! Но по-английски неправильно пишите) 0)
@alex_dudukalo
@alex_dudukalo Жыл бұрын
Спасибо вам за комментарий ) да, есть у меня такая проблема )) борюсь с ней
@brokert3163
@brokert3163 Ай бұрын
Работет с мобильного браузера?
@mambetaa3486
@mambetaa3486 Жыл бұрын
Александр, у меня вопрос. Стоит ли учить jquery в 2023 году?
@khumoyunrakhimov8909
@khumoyunrakhimov8909 Жыл бұрын
Я бы сказал 100% надо, так как этот framework облегчит твою работу если ты учишься и хочешь работать на веб-разработку, там много встроенных функций который помогает писать меньше код.
@alex_dudukalo
@alex_dudukalo Жыл бұрын
Ответ: и да и нет ) Для общего понимания и понимания кода, который написан на jquery можно почитать документацию. В сети оч много примеров и готовых решений на jquery. Но в целом сегодня можно работать и без него. Я для себя отказался от него :) А там, как кому удобно.
@mambetaa3486
@mambetaa3486 Жыл бұрын
@@alex_dudukalo Спасибо!
@mambetaa3486
@mambetaa3486 Жыл бұрын
А можно как-то реализовать, что при удалении или добавлении символов, он автоматический проверял валидацию? ( без нажатии кнопки или энтера ).
@mambetaa3486
@mambetaa3486 Жыл бұрын
еще при вводе пробела или пробелов валидация считает за строку. Я попробовал добавить условие (input.value =='' || input.value == ' ') в required , но это работает только на одном пробеле. Как можно это исправить? Спасибо)
@diyourka2221
@diyourka2221 Жыл бұрын
Прописываешь на событии изменения значения инпута чтобы проверял, но лучше будет проверять значения всех инпутов кроме того что у нажатого поля, а то как-то необоснованно нагруженно получится. А насчёт пробелов, в js наверное придётся брать стрингу в виде массива и проверять на наличие символов. Можно наверное как-то получше, но это то что мне в голову пришло.
@wowgood204
@wowgood204 Жыл бұрын
Приветствую , отвечаю на вопрос , не строгое равенство (==) , строгое равенство (===).
@alex_dudukalo
@alex_dudukalo Жыл бұрын
Здравствуйте, совершенно верно === сравнивает с учетом типа переменной )
@alexandrway3450
@alexandrway3450 Жыл бұрын
Не понимаю как сделать надпись "Поле не заполнено" над полем ввода, а не под полем.
@alex_dudukalo
@alex_dudukalo Жыл бұрын
Попробуйте использовать prepend вместо append Это поможет добавить текст ошибки перед инпутом)
@user-cn4rg9my5f
@user-cn4rg9my5f 6 ай бұрын
Дико раздражает тихая музыка на фоне. Мешает сосредоточиться. Без музыкального сопровождения лучше
@alex_dudukalo
@alex_dudukalo 6 ай бұрын
Да, получил много отзывов по этой теме :) Теперь, стараюсь не злоупотреблять фоновой музыкой. Спасибо за замечание :)
@user-cl4gp8yg7d
@user-cl4gp8yg7d 5 ай бұрын
Добрый день. На строчке const allInputs = form.qwerySellectorAll('input') выдаёт ошибку: Uncaught TypeError: form.qwerySellectorAll is not a function. Про ошибку прочёл, но не пойму почему она возникает здесь.....
@alex_dudukalo
@alex_dudukalo 5 ай бұрын
Здравствуйте, скорее всего в переменной form нет формы. Попробуйте вывести form в консоль. Я думаю там ее нет :)
@user-zy7ft8fy4e
@user-zy7ft8fy4e 4 ай бұрын
У вас опечатка, не qwery, а query
@--ag1ro--6052
@--ag1ro--6052 3 ай бұрын
@@user-zy7ft8fy4e 🤣🤣🤣
@web-impuls
@web-impuls Жыл бұрын
так у тебя и так подключение скрипта после элементов HTML идёт))) Нет никакого смысла в defer в этой ситуации, а вот если бы скрипты были бы в head подключены, то смысл бы имело)))
@alex_dudukalo
@alex_dudukalo Жыл бұрын
Спасибо за замечание. По опыту скажу, что лучше добавлять на всякий случай. Иногда подключение JS файла каким то образом может оказаться в head :)
@easycad6998
@easycad6998 Жыл бұрын
зачем устаревший способ взятие элементов document.getElementById если есть document.querySelector
@alex_dudukalo
@alex_dudukalo Жыл бұрын
Подскажите, почему getElementById устаревший ? :)
@18_cm
@18_cm Жыл бұрын
поиск элемента по id быстрее проходит.
@ZhukAcademy
@ZhukAcademy 11 ай бұрын
@@alex_dudukalo Корректніше писати не модно в 2к23 писати getElementById ;D
@user-iq3qf7py7o
@user-iq3qf7py7o 10 ай бұрын
+
@diggerdog001
@diggerdog001 7 ай бұрын
У меня вопрос к тем кто работает фронтом. Кто нибудь щас с нуля без библиотек вообще пишет валидацию?
@alex_dudukalo
@alex_dudukalo 7 ай бұрын
Да, иногда бывают такие случае, когда нужно настроить уникальную валидацию под проект. Например, когда элементы ввода не находятся в одной общей форме. :)
@i5anin
@i5anin Жыл бұрын
Не говори таких слов: я не помню, я не знаю, я забыл - эти слова сокращают твою аудиторию
@i5anin
@i5anin Жыл бұрын
Не извиняйся за длинные видео
@alex_dudukalo
@alex_dudukalo Жыл бұрын
При создании канала я думал над тем, чем канал и видео будут отличаться от других. И мне кажется, что простота изложения и демонстрация того, что каждый может ошибаться очень поможет и даст уверенность начинающему разработчику. Спасибо за рекомендацию ) Думаю в этом есть смысле ) Я эксперементтирую :)
@YourPlayGamer
@YourPlayGamer Жыл бұрын
@@alex_dudukalo Полностью согласен
@user-uf9yv1dx8p
@user-uf9yv1dx8p 2 ай бұрын
покажиш болше такие ролики
@user-tg5kb4mn9p
@user-tg5kb4mn9p 5 ай бұрын
Спасибо за видео.
@alex_dudukalo
@alex_dudukalo 5 ай бұрын
Спасибо за ваш комментарий 🤗
Валидация формы
48:12
Александр Дудукало
Рет қаралды 8 М.
JavaScript Client-side Form Validation
29:07
Florin Pop
Рет қаралды 709 М.
MEU IRMÃO FICOU FAMOSO
00:52
Matheus Kriwat
Рет қаралды 40 МЛН
THE POLICE TAKES ME! feat @PANDAGIRLOFFICIAL #shorts
00:31
PANDA BOI
Рет қаралды 13 МЛН
JSON формат и localStorage в Javascript - разбор
41:37
Александр Дудукало
Рет қаралды 9 М.
How To Make Toggle Button Using HTML & CSS
5:27
MakeTechStuff
Рет қаралды 67 М.
ФОРМА ОБРАТНОЙ СВЯЗИ ДЛЯ САЙТА - ЛЕГКО! Используем html и php
12:22
SIGNATURE { IT } Академия компьютерных технологий
Рет қаралды 50 М.
UI-компоненты №13. Валидация и отправка формы на почту в 2022
27:59
MaxGraph - cайты как страсть
Рет қаралды 19 М.
Фильтрация массива объектов Javascript
23:38
Александр Дудукало
Рет қаралды 21 М.
MEU IRMÃO FICOU FAMOSO
00:52
Matheus Kriwat
Рет қаралды 40 МЛН