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

Sdílet
Vložit
  • čas přidán 8. 12. 2022
  • Делаем проверку и отправку формы на Javascript без использования плагинов и библиотек.
    👁‍🗨 Исходники на моем телеграм канале: t.me/frontend_du2
    👁‍🗨 Discord сервер: / discord
    👁‍🗨 VK: frontend_du2
    👁‍🗨 Дзен: dzen.ru/frontend_it
    Спасибо за вашу поддерджку :)

Komentáře • 181

  • @Tema_ilit
    @Tema_ilit Před rokem +4

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

    • @alex_dudukalo
      @alex_dudukalo  Před rokem +1

      Думаю, ты прав :) Спасибо за это сообщение. Буду делать приоритет на содержании, несмотря на время :) Можно, конечно на угоду ютубу и просмотрам делать видео короче, что бы оно чаще попадало в рекомендации, но кажется - это не лучший путь для самого контента )

    • @Tema_ilit
      @Tema_ilit Před rokem +1

      @@alex_dudukalo Привет, решать конечно только тебе, но ведь есть тайм коды, если кто то более прошареный, он может простой перейти на тот момент, который ему нужен, а те, кто менее разбираются в теме будут смотреть до конца, в любом случае записывая длинные видео с подробным объяснением ты удовлетворяешь обе стороны так сказать, у тебя правда талант, может быть не к слову, но я в школе очень плохо понимал математику до 9 класса, ну не получалось и все, вообще никак, позже в 9 классе у нас сменился преподаватель и за тот год, который она меня учила, я сделал огромный скачок в математических знаниях, и даже сдал экзамен на 4 не списывая, и это я все к тому, что ты тот человек, которого хочется слушать и у которого получается донести суть, возможно потому, что ты пишешь видео с минимальными склейками, и что то гуглишь в процессе, возможно потому, что у тебя тоже есть ошибки и ты их не вырезаешь, а показываешь как выглядит написание кода на самом деле, не могу точно, сказать, что именно делает твои видео такими классными. вероятно все вместе взятое, я перечислил лишь малость, моментов, но главное не останавливайся, благодаря твоим видео я даже начал немного любить JS, потому что до этого все было безуспешно и я не понимал как с ним работать, спасибо тебе

    • @alex_dudukalo
      @alex_dudukalo  Před rokem +1

      @@Tema_ilit Привет, прочитал сообщение. Да, согласен. Я так же встречал такое в школе и университете. Я убежденно считаю, что учитель (если в слово учитель включить обобщенное понятие) - человек, который может разжечь в ученике желание заниматься изучением темы и предмета. Заинтересовать его так, что бы он сам хотел изучать, капать и находить ответы. Я стремлюсь к этому. Хочу быть именно таким учителем.
      Спасибо тебе за эти слова. Именно такие комментарии ориентируют меня и судя по ним я движусь в верном направлении. По крайней мере надеюсь на это. Я рад, что вы написали это сообщение.

  • @jugadoor
    @jugadoor Před rokem +5

    Все отлично, огромное спасибо за видео! Есть только один нюанс (для меня) - это музыка на фоне, посмотрел уже больше 10 видео на канале и те, что без музыки (либо без такой громкой музыки) воспринимались проще)

    • @alex_dudukalo
      @alex_dudukalo  Před rokem +1

      Спасибо за комментарий. Про фоновую музыку очен важно было получить мнение. Мне хотелось музыкой немного разбавить атмосферу и сделать восприятие более легче. Но видимо это только мешает. Буду что то придумывать или полностью убирать в следующих видео музыку :) спасибо за полезный коммент

    • @jugadoor
      @jugadoor Před rokem +1

      Повторюсь, наверное, если ее немного убавить, то она не будет перебивать основные мысли) посмотрим в следующих видео)

  • @user-wq4mh7li2t
    @user-wq4mh7li2t Před 3 měsíci +3

    Атрибут defer в JavaScript используется для отложенной загрузки скрипта. Когда вы добавляете атрибут defer к тегу , скрипт будет загружен параллельно с загрузкой HTML-документа, но выполнение скрипта будет отложено до тех пор, пока весь HTML-документ не будет полностью загружен.
    Это означает, что скрипт, помеченный атрибутом defer, не будет блокировать загрузку остальной части страницы. Это особенно полезно, когда у вас есть скрипты, которые необходимо загрузить до того, как страница будет полностью интерактивной, но они не влияют на начальную загрузку контента или отображение страницы.

  • @syuzannanasukhova5777

    Ставлю лайк и подписываюсь!)
    Очень классно рассказываешь, делая акценты на важных моментах!)

  • @makeuppolina
    @makeuppolina Před rokem +2

    Спасибо большое за такое полезное видео! Вы, как всегда, все четко и понятно объяснили и разложили по полочкам👍👍👍Мне очень нравится ваша манера подачи материал - легкая и непринужденная (еще и с юмором))). Ваши видео помогают в обучении👍

    • @alex_dudukalo
      @alex_dudukalo  Před rokem

      Большое вам спасибо ) Безумно приятно читать такие отзывы ) Ваши комментарии вдохновляют на записи новых видео :)

  • @user-zo6rp1xn8i
    @user-zo6rp1xn8i Před rokem +3

    Александр, вот и добралась до валидации формы!! Лайк и сердечко, как всегда, вашим видео!❤

    • @alex_dudukalo
      @alex_dudukalo  Před rokem +1

      Спасибо, что оценили ролик и поддержали меня :) Будем работать и стараться)

  • @user-zd6ji8wd2s
    @user-zd6ji8wd2s Před 6 měsíci

    Александр, большое спасибо за подробное видео!!! Спасибо, что понятным языком все объясняете! Вы даете надежду, что все возможно)))

  • @vladlesun3811
    @vladlesun3811 Před rokem +1

    Александр, вы как всегда, четко, быстро, интересно и понятно, спасибо большое 🫡

    • @alex_dudukalo
      @alex_dudukalo  Před rokem

      Большое спасибо за ваш комментарий :) Очень приятно. Не смог оперативно ответить на комментарий :(

  • @JennyAirAround
    @JennyAirAround Před rokem

    Александр, спасибо большое!! Буквально, недавно, настроение учебное пошло на спад, вдохновения нет, и тут Ваше видео с материалом, который только изучила и забыла (как это обычно происходит), начала смотреть и не смогла оторваться, видео больше 30 мин, но зашло, как мороженое. Там и другие Ваши произведения были просмотрены. Это очень здорово! Особенная благодарность за Вашу открытость - не бояться косяков и ошибок, за самопроверку, хоть наглядно показали куда "тыкать" (как начинающий, позволяю себе это слово). После просмотра ваших уроков по ранее усвоенному материалу - всё встает на свои места. Начинающим - обязательно к просмотру.

    • @alex_dudukalo
      @alex_dudukalo  Před rokem

      Спасибо за ваш приятнейший комментарий. Я читаю и улыбаюсь от того, как я рад, что могу помочь роликами)) Значит работаю не зря) Спасибо вам еще раз

  • @user-ct3ui6yc4l
    @user-ct3ui6yc4l Před rokem +2

    Огромное спасибо за обучающий материал, легко воспринимается, очень полезное видео! :)

    • @alex_dudukalo
      @alex_dudukalo  Před rokem

      Спасибо вам ) Рад, что ролики для вас полезны. Бубу стараться

  • @user-zo6rp1xn8i
    @user-zo6rp1xn8i Před 11 měsíci +2

    Смотрю в 105й раз!!! Повторение - мать Учения😀😀😀Спасибо!!!

    • @alex_dudukalo
      @alex_dudukalo  Před 11 měsíci

      Спасибо за такой комментарий🙈 это очень вдохновляет и мотивирует на новые видео 🤗

  • @user-ch6ot6bc8q
    @user-ch6ot6bc8q Před rokem +2

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

    • @alex_dudukalo
      @alex_dudukalo  Před rokem

      Спасибо вам за сообщение с мнением. Я рад, что у вас получилось найти решение проблемы в этом видео :) Старался максимально больше вложить информации в ролик ) Спасибо вам

  • @HAVALSKI
    @HAVALSKI Před rokem +3

    Отличное объяснение) по-моему даже проще, чем библиотекой пользоваться

    • @alex_dudukalo
      @alex_dudukalo  Před rokem +1

      Да да, раньше это было сделать сложнее. Приходилось писать код. Следить за прокруткой страницы. Делать вычисления. Это свойство все упростило ))

  • @myaushenka
    @myaushenka Před rokem

    Спасибо! Мне очень помогло это видео, так как понадобилось сделать фронтенд часть, а я в ней плохо разбираюсь. Подпишусь в поддержку вашего канала)

  • @molniagrom3599
    @molniagrom3599 Před 3 měsíci +1

    Всё очень доступно👍
    На будущее, как частый зритель таких видео, говорю что очень удобно использовать тайм-коды, а не искать если что-то нужно конкретное перематывая всё видео...

  • @followmagnus9775
    @followmagnus9775 Před 4 měsíci +2

    Отличное обучающее видео, долго сидел сам мучился как написать валидацию, посмотрел видео и разобрался. Спасибо большое!

  • @vzrosly_muzik
    @vzrosly_muzik Před rokem +1

    Не часто я оставляю комментарии, но тебе оставлю, спасибо за видео, тебя очень приятно смотреть!

    • @alex_dudukalo
      @alex_dudukalo  Před rokem

      Спасибо вам за комментарий и, за то что решили помочь. Отклики реально помогают и я вижу это в статистике. Буду стараться еще лучше))

  • @lemexaxa
    @lemexaxa Před rokem +1

    Очень доступно объясняете. Спасибо)))

    • @alex_dudukalo
      @alex_dudukalo  Před rokem

      Сергей, спасибо за комментарий. Очень приятно, что вы смотрите ролики. :) Возможно информация пригодится где то )

  • @user-hc7wq9om9i
    @user-hc7wq9om9i Před rokem

    Спасибо большое Вам за видео полезное, очень интересно!👍👍👍

  • @elenaizmaylova9331
    @elenaizmaylova9331 Před 7 měsíci

    Александр, вы просто супер! Видео очень полезное и вы очень приятный человек) Спасибо за ваш труд!)

    • @alex_dudukalo
      @alex_dudukalo  Před 7 měsíci +1

      Спасибо большое за ваш комментарий и такие приятные слова ☺ ваша поддержка вдохновляет на новые видео 🔥

  • @risenshine1349
    @risenshine1349 Před rokem +1

    спасибо большое за такие полезные видео! лайк и коммент для продвижения и улыбки))

    • @alex_dudukalo
      @alex_dudukalo  Před rokem

      Это вам большое спасибо :) Улыбка точно есть. Надеюсь и продвижение будет. Хорошего вечера :)

  • @relaxdeepsleepmusic3608

    Классное видео, очень помогло, спасибо.

  • @Vt_Shabanoff
    @Vt_Shabanoff Před 11 měsíci +1

    Александр, спасибо огромное за такие классные видосы. Круто если б еще валидацию формы даты можно было бы рассмотреть.

    • @alex_dudukalo
      @alex_dudukalo  Před 10 měsíci

      Спасибо вам :) Записал ваше предложение себе в список роликов для записи. Такое видео в плане :) Спасибо

  • @typhoonx04
    @typhoonx04 Před rokem +1

    Хорошая тема, спасибо Александр!

    • @alex_dudukalo
      @alex_dudukalo  Před rokem

      Давно планировал записать видео про валидацию. Уверен, что она понадобится в многих проектах :)

  • @yuriydoychev5857
    @yuriydoychev5857 Před 3 měsíci +2

    Спасибо за это видео. Хорошо объясняете. Заходит.

    • @alex_dudukalo
      @alex_dudukalo  Před 3 měsíci +1

      Спасибо за ваш комментарий :) Я очень рад, что видео нравится)) Старался

  • @nikitachuzhaykin
    @nikitachuzhaykin Před rokem +2

    500 лайк мой) Спасибо за видео!

  • @artyaexe
    @artyaexe Před rokem +2

    Попрошу скиллбокс , чтобы тебя сделали моим куратором 😂👍🏽 спасибо за инфу )

    • @alex_dudukalo
      @alex_dudukalo  Před rokem

      Да, конечно. Буду рад с вами поработать на курсе :)

  • @ssswi_feast
    @ssswi_feast Před měsícem +1

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

    • @alex_dudukalo
      @alex_dudukalo  Před měsícem

      Очень приятно получать такие комментарии 😇 спасибо

  • @user-tg2qt7em4t
    @user-tg2qt7em4t Před 9 měsíci +1

    Александр, спасибо за понятное видео! Data - атрибуты очень интересная тема, было бы здорово посмотреть

    • @alex_dudukalo
      @alex_dudukalo  Před 9 měsíci

      Здравствуйте, Ольга. Спасибо за ваш комментарий. Да-да, уже такой ролик есть. Если будет время и желание, обязательно посмотрите :) czcams.com/video/l52vbSPGUrg/video.html

  • @sergmalin210
    @sergmalin210 Před 8 měsíci +1

    Спасибо, молодец, было очень полезно для меня и понятно

    • @alex_dudukalo
      @alex_dudukalo  Před 8 měsíci

      Спасибо за ваш комментарий🤗

  • @Elena.S.
    @Elena.S. Před rokem +1

    Алесандр, спасибо за видео!

    • @alex_dudukalo
      @alex_dudukalo  Před rokem

      Спасибо вам за вашу поддержку :)

  • @user-lm9ee1gn5p
    @user-lm9ee1gn5p Před rokem +1

    Спасибо, супер полезно, ждем новый контент 👍

    • @alex_dudukalo
      @alex_dudukalo  Před rokem

      Спасибо за отклик. Такие комментарии мотивируют на работу )

  • @mambetaa3486
    @mambetaa3486 Před rokem +1

    Спасибо Александр!

    • @alex_dudukalo
      @alex_dudukalo  Před rokem +1

      Спасибо вам за вашу поддержку :)

  • @user-uu9mc1xq1o
    @user-uu9mc1xq1o Před rokem +1

    Спасибо за видео! Лайк, подписка, комментарий)

    • @alex_dudukalo
      @alex_dudukalo  Před rokem

      Спасибо за ваш комментарий и поддержку. С наступающим новым годом :)

  • @Alex__88
    @Alex__88 Před 4 měsíci

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

  • @user-mr2hs4rg2g
    @user-mr2hs4rg2g Před 11 měsíci

    отличное видео! спасибо :)

    • @alex_dudukalo
      @alex_dudukalo  Před 11 měsíci

      Спасибо за ваш комментарий 😊

  • @dezmos6389
    @dezmos6389 Před rokem +1

    Отличное видео! Насчет фоновой музыки полностью согласен с предыдущим автором ;)

    • @alex_dudukalo
      @alex_dudukalo  Před rokem

      Спасибо за комментарий и поддержку. Про музыку мне было важно узнать. Буду исправлять и учитывать это :) Спасибо

  • @Tosha.V
    @Tosha.V Před rokem

    Подача материала и картинка понравились - продолжай в том же духе! Как вариант новые темы - телефонный справочник, веб форма с валидацией и отправкой к примеру в Google Sheets (аналог Google Форм) думаю многим было бы интересно)

    • @alex_dudukalo
      @alex_dudukalo  Před rokem +1

      Большое спасибо за поддержку и комментарий. Кстати, на счет справочника отличная идея :) Добавляю себе в список записи видео ))

  • @user-ub8jf6ok9b
    @user-ub8jf6ok9b Před rokem +1

    Алесандр, спасибо за видео! Все круто и понятно, писала как всегда с вами! Были в процессе вопросы, но вы потом на все отвечали, единственное не совсем поняла это работа с методом contains() - при создании функции для очистки ошибок при повторной валидации.

    • @alex_dudukalo
      @alex_dudukalo  Před rokem

      Спасибо за ваш комментарий и поддержку. Очень приятно, что видео было для вас полезным. Тут дело в следующем. При повторной запуске проверки валидации нам нужно удалить старые сообщения об ошибках. Если они там есть, то проблем не будет. Но если ошибки у поля не было и мы пытаемся ее удалить, то у нас появится ошибка, что элемент не существут. Поэтому мы проверяем наличие класса ошибки. contains возвращает true, если у элемента есть указанный класс. Если он есть, значить можно смело делать удаление :)

  • @timkri0
    @timkri0 Před rokem +1

    Спасибо за видео !

    • @alex_dudukalo
      @alex_dudukalo  Před rokem

      Спасибо за вашу поддержку )

  • @user-hc7wq9om9i
    @user-hc7wq9om9i Před rokem

    Спасибо большое!

  • @Tilda_Practice
    @Tilda_Practice Před rokem +1

    Спасибо !!! было бы классно если бы вы записали видео еще и про это : При потере фокуса (событие blur, происходит, когда пользователь убрал выделение с поля для ввода) должна происходить проверка на корректность введённого значения и замена его на корректное при необходимости по следующим правилам:
    Из строки значения должны удаляться все символы, кроме допустимых.
    Пробелы и дефисы в начале и конце значения должны удаляться.
    Несколько идущих подряд пробелов или дефисов должны заменяться на один.
    Первая буква должна приводиться к верхнему регистру, а все остальные - к нижнему.
    Отправка формы должна добавлять абзац с введёнными фамилией, именем и отчеством под форму без перезагрузки страницы. Каждая отправка формы добавляет новый абзац на страницу. После отправки поля на форме должны очищаться.

    • @alex_dudukalo
      @alex_dudukalo  Před rokem

      Спасибо вам за отклик. Да, кажется это те проверки, которые указаны в задании 1 продвинутого уровня по JS. В этом ролике хотел показать базовый способ валидации. С продвинутым (который показали вы) дела интереснее. Думаю, что можно в будущем записать такой ролик :) Спасибо вам и с наступившим Новым Годом :)

  • @user-vp6bu3fg1o
    @user-vp6bu3fg1o Před rokem +2

    Мне понравилось)) лайк лайк

    • @alex_dudukalo
      @alex_dudukalo  Před rokem

      Спасибо вам за поддержку лайком :)

  • @arseniyklimovich8409
    @arseniyklimovich8409 Před 10 měsíci

    Спасибо, брат, очень помог

  • @khumoyunrakhimov8909
    @khumoyunrakhimov8909 Před rokem +2

    Давно искал видео где validaiton делается чисто на Javascript. Наконец-то нашёл ). Всё объяснено чётко и понятно. Уважение к тебе и продолжай в том же духе. Обязательно подписка, лайк и комментарий. Одна просьба, можешь делать видео где делается validation на определённый input.value который проверяет на уникальность среди данных в базе данных(mysql). Заранее спасибо.

    • @alex_dudukalo
      @alex_dudukalo  Před rokem +1

      Большое спасибо за ваш комментарий и поддержку в виде подписки и комментария. Да, понимаю вас. Сам когда то искал такие примеры. У меня как раз запланирован такой материал для записи. Думаю скоро сделаю ролик с валидацией пароля или логина (связка с сервером) это интересный пример :)

    • @khumoyunrakhimov8909
      @khumoyunrakhimov8909 Před rokem

      @@alex_dudukalo да очень интересный и нужный материал будет, буду ждать )

  • @escobar929
    @escobar929 Před 5 měsíci

    просто красава!!спасибо мужик!!! можно, пожалуйста еще практического приминения js!!

  • @Aelita042
    @Aelita042 Před měsícem

    Ахах, так смешно про лайки и комментарии сказали)) лайк и коммент ❤

  • @13101997a1
    @13101997a1 Před 2 měsíci

    Лучший видеоурок про валидацию формы. Спасибо
    Про тайм коды писали ниже, подумайте. Действительно будет полезно)

    • @alex_dudukalo
      @alex_dudukalo  Před 2 měsíci

      Большое спасибо, очень приятно читать такие комментарии. Это очень мотивирует 😇

  • @ssr.1989
    @ssr.1989 Před 9 měsíci

    Спасибо большое, Александр! Для диплома хочу применить без подключения сторонних библиотек.

    • @alex_dudukalo
      @alex_dudukalo  Před 9 měsíci

      Спасибо за ваш комментарий🤗 желаю удачи на защите диплома 🍀

  • @user-gf2io4bf3k
    @user-gf2io4bf3k Před 9 měsíci

    Классно!

    • @alex_dudukalo
      @alex_dudukalo  Před 9 měsíci

      Спасибо 🔥 надеюсь и другие видео канала будут вам полезны))

  • @Sanychish
    @Sanychish Před rokem +1

    Спасибо!

  • @andreyfedyukin8360
    @andreyfedyukin8360 Před rokem +1

    Спасибо 👍

  • @user-yp2tx6vy6y
    @user-yp2tx6vy6y Před 8 měsíci

    Здравствуйте. А может возникнуть конфликт, если изначально в input поставили value, я имею ввиду в HTML?

  • @user-tg5kb4mn9p
    @user-tg5kb4mn9p Před 7 měsíci

    Добрый вечер! Подскажите, а можно зашифровать данные при отправке на почту?

  • @LoveSkill_69
    @LoveSkill_69 Před rokem

    И почему, например, если у меня форма в модальном окне, я не могу после preventDefault() закрыть её никаким способом?

  • @enterkvas
    @enterkvas Před 9 měsíci +1

    Здравствуйте, Александр! Огромное спасибо за контент! Я не силен пока в 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  Před 9 měsíci +1

      Здравствуйте, Александр. Спасибо вам за такой приятный комментарий. Я рад, что видео было для вас полезным :) Кажется, что в коде все хорошо. Единственное, я бы предложил использовать тройное === вместо двойного :) И в этой строчке не хватает кавычки if(input.value == ''){

    • @enterkvas
      @enterkvas Před 9 měsíci

      Большое спасибо вам, Александр, за код ревью! Хороший для меня урок по внимательному отношению к делу. Читаю сейчас "Идеальный программист" Роберта Мартина. Сразу вспоминается понятие "профессионализм". Еще раз большое спасибо вам, Александр! Успехов! P.S. ксатати, хорошая тема найти по различию между разными операторами "=", "==" и "===".@@alex_dudukalo

    • @enterkvas
      @enterkvas Před 8 měsíci

      Александр, приветствую! Я много посвятил сегодня времени (незапланированного) изучению операторов "=", "==" и "===" (в основном по книге "Java Script подробное руководство" 5-е издание. Автор: Дэвид Флэнаган и по некоторым другим источникам). Конечно, я не смог сразу разобраться во ВСЕХ тонкостях этих операторов. Но, продолжая работу со скриптом вашего текущего ролика, хотелось бы услышать, хотя бы очень коротко, обоснование вашей рекомендации в if(input.value == ''){ ... в условии писать "===" а не "==". @@alex_dudukalo

  • @yurckov
    @yurckov Před 5 měsíci +1

    Привет. У меня страница примерно такая же но еще есть checkbox на согласие снизу. Весь интернет облазил и никак не могу найти как сделать еще и для чек бокса на ванильном js. Буду признателен за помощь

  • @szyrwel
    @szyrwel Před rokem +1

    Лайк, подписка, комментарий - всё как и просил)

    • @alex_dudukalo
      @alex_dudukalo  Před rokem

      Спасибо за вашу поддержку :) Мне это очень помогает :)

  • @user-lj3kp8ll6h
    @user-lj3kp8ll6h Před rokem +1

    Было бы отлично, чтобы вы записали видео по data-атрибутам)

    • @alex_dudukalo
      @alex_dudukalo  Před rokem

      Уже есть, сегодня выложил. Благодаря вашей рекомендации записал :) czcams.com/video/l52vbSPGUrg/video.html

  • @Vt_Shabanoff
    @Vt_Shabanoff Před 8 měsíci +2

    Александр, хотелось бы от Вас видео про часть валидации такой как маска под номер телефона, очень популярная тема сейчас

    • @user-rx9lo2kl7k
      @user-rx9lo2kl7k Před 7 měsíci

      Она была популярной ещё лет 10 назад

  • @azerqgaming
    @azerqgaming Před 11 měsíci +2

    Александр, спасибо за видео, я сам backend c# разработчик, работаю много с БД, и всякими околосистемными штуками, но паралельно интересуюсь и фронтендом, очень понравился фреймворк React.js + Typescript, но и vanilla js тоже норм, для своих задач, как относитесь к нему и подобным фреймворкам (vue, angular, etc...) ?

    • @alex_dudukalo
      @alex_dudukalo  Před 11 měsíci +2

      Здравствуйте, Антон. Спасибо за ваш комментарий и интересный вопрос. Фреймворки, коими являются Vue, React и другие - это крутые инструмент, которые сильно упрощают разработку веб-приложений (особенно больших) Сильно упрощают и оптимизируют. Отношусь к ним очень положительно, но всегда помню о том, что фреймворк для JS работает на Javascript и для того, что бы их эффективно использовать, нужно знать хорошо JS. Поэтому всегда рекомендую начать изучат фронтент с JS. Вы уже знаете языки программирования, поэтому вам будет проще ))

    • @azerqgaming
      @azerqgaming Před 11 měsíci +1

      @@alex_dudukalo спасибо за ответ, я уже в принципе сейчас знаю JS, на базовом уровне, начал разбираться с вёрсткой на flexbox и Grid, пробовал tailwind и Material UI, мне прям доставляет некоторое удовольствие видеть одну систему с разных сторон, как со стороны UI, так и со стороны внутренностей сервисов, API, хранилища, модулей система, да даже некоторые задачи DevOps интересны, так что программирование это одновременно увлечение и работа, радует для себя открывать что-то новое)

  • @andreyryzhykov9713
    @andreyryzhykov9713 Před rokem

    братик лайкнул подписался

    • @alex_dudukalo
      @alex_dudukalo  Před rokem

      Спасибо за лайк и поддержку :) Это супер приятно и помогает каналу ):

  • @baileysli6235
    @baileysli6235 Před rokem +1

    Советую ознакомиться с validity у элементов форм. Многие проверки браузер уже делает из коробки

    • @alex_dudukalo
      @alex_dudukalo  Před rokem

      Да, тоже способ. Но часто в практике есть необходимость сделать свою валидацию с уникальными правилами проверок полей )

  • @megabulk
    @megabulk Před rokem +1

    Ещё раз поразился отсутствию склеек (кроем той что в начале) и одновременно четкости речи и объяснения!

    • @alex_dudukalo
      @alex_dudukalo  Před rokem

      Да, это видео получилось сделать целым без склейки. Но это не лучшая практика ) Много лишнего ):

  • @bikadV
    @bikadV Před 5 měsíci

    Зачем в if(validation(this)) добавлять "== true" если if и так возвращает только true/false на любое условие в скобках?

  • @LoveSkill_69
    @LoveSkill_69 Před rokem

    Очень полезный материал! А как сделать так чтобы валидация была сразу на нескольких формах (они одинаковые). У меня ошибка возникает на этапе, где в функции валидации выводится в консоль сам элемент form. 7:18

  • @tipOdessa
    @tipOdessa Před rokem +1

    Здравствуйте! Очень круто! Но я бы еще метод trim() впихнул, он удалит все пробелы

    • @alex_dudukalo
      @alex_dudukalo  Před rokem +2

      Да да, этот метод бы помог убрать лишние пробелы ) Не пришло в голову во время записи видео :) Спасибо

  • @justfisher2920
    @justfisher2920 Před rokem +2

    Атрибут defer запускает скрипт асинхронно, его можно разместить где угодно, хоть выше хоть ниже

  • @tigrext20
    @tigrext20 Před rokem +1

    Вопрос возник. Лучше использовать цикл for of или for each? Что выполняется быстрее или нет разницы?

    • @alex_dudukalo
      @alex_dudukalo  Před rokem

      Если вы работаете с массивом DOM элементов, например использую функцию querySelectorAll, то думаю удобнее сразу использовать forEach? Этот даст возможность делать такие приемы. document.querySelectorAll('*').forEach(el=>{console.log(el);})
      В других случаях, если счетчик не нужен, удобно использовать for of

  • @user-xz6kl7vo1i
    @user-xz6kl7vo1i Před 8 měsíci +1

    Спасибо, хорошо объяснил)) 👍 Подскажи как сделать подсветку слов в вс коде как у тебя ?)) Чтоб querySelector жёлтым, form оранжевым и тд)

    • @alex_dudukalo
      @alex_dudukalo  Před 8 měsíci

      Спасибо за ваш комментарий. Вы можете в настройках текущей темы выбрать тему Monokai и тогда у вас будет такое же оформление :)

    • @user-xz6kl7vo1i
      @user-xz6kl7vo1i Před 8 měsíci

      @@alex_dudukalo спасибо)

    • @user-xz6kl7vo1i
      @user-xz6kl7vo1i Před 8 měsíci

      @@alex_dudukalo спасибо)

  • @user-ey3uh4un1s
    @user-ey3uh4un1s Před 6 měsíci

    Если коротко, это очень круто и понятно, спасибо!

    • @alex_dudukalo
      @alex_dudukalo  Před 6 měsíci

      Спасибо за обратную связь 🤗

  • @nocomments5529
    @nocomments5529 Před 5 měsíci

    Хорошие у вас уроки, смотрел несколько, интересно. Делал валидацию с помощью ивент focus/blur, код получается меньше.

  • @ssswi_feast
    @ssswi_feast Před měsícem +1

    Красава спасибо! Всегда с етой валидацией проблема.То Pristine подключу запутаюсь..То еще что нибудь. Твое видео малость поставило на свои места.Мы можем и усложнять ведь код внося поправки на маски или рег.выражения??

    • @alex_dudukalo
      @alex_dudukalo  Před měsícem

      Рад, что видео было для вас полезным. Да, конечно. Вы можете дополнять код и делать его лучше :)

  • @mambetaa3486
    @mambetaa3486 Před rokem

    А можно как-то реализовать, что при удалении или добавлении символов, он автоматический проверял валидацию? ( без нажатии кнопки или энтера ).

    • @mambetaa3486
      @mambetaa3486 Před rokem

      еще при вводе пробела или пробелов валидация считает за строку. Я попробовал добавить условие (input.value =='' || input.value == ' ') в required , но это работает только на одном пробеле. Как можно это исправить? Спасибо)

    • @diyourka2221
      @diyourka2221 Před rokem

      Прописываешь на событии изменения значения инпута чтобы проверял, но лучше будет проверять значения всех инпутов кроме того что у нажатого поля, а то как-то необоснованно нагруженно получится. А насчёт пробелов, в js наверное придётся брать стрингу в виде массива и проверять на наличие символов. Можно наверное как-то получше, но это то что мне в голову пришло.

  • @brokert3163
    @brokert3163 Před 2 měsíci

    Работет с мобильного браузера?

  • @webdmitriev
    @webdmitriev Před rokem +1

    Спасибо, с номером телефона бы ещё посмотреть)

    • @alex_dudukalo
      @alex_dudukalo  Před rokem +1

      С телефоном чуть сложнее. Обычно валидацию с номером телефона делают с маской. Тут придется подключать библиотеку дополнительную, что не очень хочется делать ) Но, как идея для реализации видео хорошая

  • @user-gx3ke4it4r
    @user-gx3ke4it4r Před 2 měsíci

    Александр! Я прям увлекся вашим видеоуроками, не пропускаю ни одного. Ссылки на адреса ваших роликов коллекционирую и храню в своем электронном конспекте, как большую ценность в копилке знаний по js. Спасибо огромное за ваш неоценимый вклад в развитие, ни сколько не преувеличивая, в развитие IT-технологий в стране!
    С уважением, Михаил!

  • @i5anin
    @i5anin Před rokem +1

    Как выполнить 2?
    1. все поля обязательны для заполнения после применения к значению метода trim()
    2. дата рождения находится в диапазоне от 01.01.1900 до текущей даты
    3. год начала обучения находится в диапазоне от 2000-го до текущего года

    • @alex_dudukalo
      @alex_dudukalo  Před rokem

      Тут нужно добавить новые условия проверки ), как например с maxLength. Кажется у же отвечал на платформе вам? или я ошибаюсь ? :)

  • @mambetaa3486
    @mambetaa3486 Před rokem +1

    Александр, у меня вопрос. Стоит ли учить jquery в 2023 году?

    • @khumoyunrakhimov8909
      @khumoyunrakhimov8909 Před rokem +1

      Я бы сказал 100% надо, так как этот framework облегчит твою работу если ты учишься и хочешь работать на веб-разработку, там много встроенных функций который помогает писать меньше код.

    • @alex_dudukalo
      @alex_dudukalo  Před rokem +1

      Ответ: и да и нет ) Для общего понимания и понимания кода, который написан на jquery можно почитать документацию. В сети оч много примеров и готовых решений на jquery. Но в целом сегодня можно работать и без него. Я для себя отказался от него :) А там, как кому удобно.

    • @mambetaa3486
      @mambetaa3486 Před rokem

      @@alex_dudukalo Спасибо!

  • @alexandrway3450
    @alexandrway3450 Před rokem +1

    Не понимаю как сделать надпись "Поле не заполнено" над полем ввода, а не под полем.

    • @alex_dudukalo
      @alex_dudukalo  Před rokem

      Попробуйте использовать prepend вместо append Это поможет добавить текст ошибки перед инпутом)

  • @user-cl4gp8yg7d
    @user-cl4gp8yg7d Před 6 měsíci

    Добрый день. На строчке const allInputs = form.qwerySellectorAll('input') выдаёт ошибку: Uncaught TypeError: form.qwerySellectorAll is not a function. Про ошибку прочёл, но не пойму почему она возникает здесь.....

    • @alex_dudukalo
      @alex_dudukalo  Před 6 měsíci

      Здравствуйте, скорее всего в переменной form нет формы. Попробуйте вывести form в консоль. Я думаю там ее нет :)

    • @user-zy7ft8fy4e
      @user-zy7ft8fy4e Před 5 měsíci

      У вас опечатка, не qwery, а query

    • @--ag1ro--6052
      @--ag1ro--6052 Před 4 měsíci

      @@user-zy7ft8fy4e 🤣🤣🤣

  • @user-sh1ro8bg5l
    @user-sh1ro8bg5l Před rokem +2

    Классное объяснение! Но по-английски неправильно пишите) 0)

    • @alex_dudukalo
      @alex_dudukalo  Před rokem +1

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

  • @aleksandrkozowski9717
    @aleksandrkozowski9717 Před 4 měsíci

    🍉

  • @wowgood204
    @wowgood204 Před rokem +1

    Приветствую , отвечаю на вопрос , не строгое равенство (==) , строгое равенство (===).

    • @alex_dudukalo
      @alex_dudukalo  Před rokem

      Здравствуйте, совершенно верно === сравнивает с учетом типа переменной )

  • @user-cn4rg9my5f
    @user-cn4rg9my5f Před 7 měsíci +1

    Дико раздражает тихая музыка на фоне. Мешает сосредоточиться. Без музыкального сопровождения лучше

    • @alex_dudukalo
      @alex_dudukalo  Před 7 měsíci

      Да, получил много отзывов по этой теме :) Теперь, стараюсь не злоупотреблять фоновой музыкой. Спасибо за замечание :)

  • @easycad6998
    @easycad6998 Před rokem +1

    зачем устаревший способ взятие элементов document.getElementById если есть document.querySelector

    • @alex_dudukalo
      @alex_dudukalo  Před rokem

      Подскажите, почему getElementById устаревший ? :)

    • @18_cm
      @18_cm Před rokem

      поиск элемента по id быстрее проходит.

    • @ZhukAcademy
      @ZhukAcademy Před rokem

      @@alex_dudukalo Корректніше писати не модно в 2к23 писати getElementById ;D

  • @diggerdog001
    @diggerdog001 Před 8 měsíci +1

    У меня вопрос к тем кто работает фронтом. Кто нибудь щас с нуля без библиотек вообще пишет валидацию?

    • @alex_dudukalo
      @alex_dudukalo  Před 8 měsíci

      Да, иногда бывают такие случае, когда нужно настроить уникальную валидацию под проект. Например, когда элементы ввода не находятся в одной общей форме. :)

  • @web-impuls
    @web-impuls Před rokem +1

    так у тебя и так подключение скрипта после элементов HTML идёт))) Нет никакого смысла в defer в этой ситуации, а вот если бы скрипты были бы в head подключены, то смысл бы имело)))

    • @alex_dudukalo
      @alex_dudukalo  Před rokem

      Спасибо за замечание. По опыту скажу, что лучше добавлять на всякий случай. Иногда подключение JS файла каким то образом может оказаться в head :)

  • @user-iq3qf7py7o
    @user-iq3qf7py7o Před rokem

    +

  • @i5anin
    @i5anin Před rokem +2

    Не говори таких слов: я не помню, я не знаю, я забыл - эти слова сокращают твою аудиторию

    • @i5anin
      @i5anin Před rokem +2

      Не извиняйся за длинные видео

    • @alex_dudukalo
      @alex_dudukalo  Před rokem +4

      При создании канала я думал над тем, чем канал и видео будут отличаться от других. И мне кажется, что простота изложения и демонстрация того, что каждый может ошибаться очень поможет и даст уверенность начинающему разработчику. Спасибо за рекомендацию ) Думаю в этом есть смысле ) Я эксперементтирую :)

    • @YourPlayGamer
      @YourPlayGamer Před rokem

      @@alex_dudukalo Полностью согласен

  • @user-uf9yv1dx8p
    @user-uf9yv1dx8p Před 3 měsíci

    покажиш болше такие ролики

  • @user-tg5kb4mn9p
    @user-tg5kb4mn9p Před 6 měsíci

    Спасибо за видео.

    • @alex_dudukalo
      @alex_dudukalo  Před 6 měsíci

      Спасибо за ваш комментарий 🤗