Саша не говори себе делать короткие видео, то что ты записываешь очень понятно и доступно к пониманию, благодаря твоим видео начал на уровень прямо лучше разбираться во всем, много чего уже посмотрел, не останавливайся
Думаю, ты прав :) Спасибо за это сообщение. Буду делать приоритет на содержании, несмотря на время :) Можно, конечно на угоду ютубу и просмотрам делать видео короче, что бы оно чаще попадало в рекомендации, но кажется - это не лучший путь для самого контента )
@@alex_dudukalo Привет, решать конечно только тебе, но ведь есть тайм коды, если кто то более прошареный, он может простой перейти на тот момент, который ему нужен, а те, кто менее разбираются в теме будут смотреть до конца, в любом случае записывая длинные видео с подробным объяснением ты удовлетворяешь обе стороны так сказать, у тебя правда талант, может быть не к слову, но я в школе очень плохо понимал математику до 9 класса, ну не получалось и все, вообще никак, позже в 9 классе у нас сменился преподаватель и за тот год, который она меня учила, я сделал огромный скачок в математических знаниях, и даже сдал экзамен на 4 не списывая, и это я все к тому, что ты тот человек, которого хочется слушать и у которого получается донести суть, возможно потому, что ты пишешь видео с минимальными склейками, и что то гуглишь в процессе, возможно потому, что у тебя тоже есть ошибки и ты их не вырезаешь, а показываешь как выглядит написание кода на самом деле, не могу точно, сказать, что именно делает твои видео такими классными. вероятно все вместе взятое, я перечислил лишь малость, моментов, но главное не останавливайся, благодаря твоим видео я даже начал немного любить JS, потому что до этого все было безуспешно и я не понимал как с ним работать, спасибо тебе
@@Tema_ilit Привет, прочитал сообщение. Да, согласен. Я так же встречал такое в школе и университете. Я убежденно считаю, что учитель (если в слово учитель включить обобщенное понятие) - человек, который может разжечь в ученике желание заниматься изучением темы и предмета. Заинтересовать его так, что бы он сам хотел изучать, капать и находить ответы. Я стремлюсь к этому. Хочу быть именно таким учителем. Спасибо тебе за эти слова. Именно такие комментарии ориентируют меня и судя по ним я движусь в верном направлении. По крайней мере надеюсь на это. Я рад, что вы написали это сообщение.
Атрибут defer в JavaScript используется для отложенной загрузки скрипта. Когда вы добавляете атрибут defer к тегу , скрипт будет загружен параллельно с загрузкой HTML-документа, но выполнение скрипта будет отложено до тех пор, пока весь HTML-документ не будет полностью загружен. Это означает, что скрипт, помеченный атрибутом defer, не будет блокировать загрузку остальной части страницы. Это особенно полезно, когда у вас есть скрипты, которые необходимо загрузить до того, как страница будет полностью интерактивной, но они не влияют на начальную загрузку контента или отображение страницы.
красава, с твоих слов все становится понятно с первого раза, не то что в моей онлайн школе, по 10 раз смотришь курс и в итоге взгляд на домашку как у барана на новые ворота. Щас запилю код и моя прога взлетит, наконец-то
Все отлично, огромное спасибо за видео! Есть только один нюанс (для меня) - это музыка на фоне, посмотрел уже больше 10 видео на канале и те, что без музыки (либо без такой громкой музыки) воспринимались проще)
Спасибо за комментарий. Про фоновую музыку очен важно было получить мнение. Мне хотелось музыкой немного разбавить атмосферу и сделать восприятие более легче. Но видимо это только мешает. Буду что то придумывать или полностью убирать в следующих видео музыку :) спасибо за полезный коммент
Очень долго искал пытался решить проблему с отправкой формы после валидации, в этом ролике я нашел кк можно решить мою проблему. Спасибо Вам большое за подробное и понятное видео ! Успехов Вашему каналу
Спасибо вам за сообщение с мнением. Я рад, что у вас получилось найти решение проблемы в этом видео :) Старался максимально больше вложить информации в ролик ) Спасибо вам
Спасибо большое за такое полезное видео! Вы, как всегда, все четко и понятно объяснили и разложили по полочкам👍👍👍Мне очень нравится ваша манера подачи материал - легкая и непринужденная (еще и с юмором))). Ваши видео помогают в обучении👍
Александр, спасибо большое!! Буквально, недавно, настроение учебное пошло на спад, вдохновения нет, и тут Ваше видео с материалом, который только изучила и забыла (как это обычно происходит), начала смотреть и не смогла оторваться, видео больше 30 мин, но зашло, как мороженое. Там и другие Ваши произведения были просмотрены. Это очень здорово! Особенная благодарность за Вашу открытость - не бояться косяков и ошибок, за самопроверку, хоть наглядно показали куда "тыкать" (как начинающий, позволяю себе это слово). После просмотра ваших уроков по ранее усвоенному материалу - всё встает на свои места. Начинающим - обязательно к просмотру.
Всё очень доступно👍 На будущее, как частый зритель таких видео, говорю что очень удобно использовать тайм-коды, а не искать если что-то нужно конкретное перематывая всё видео...
Спасибо !!! было бы классно если бы вы записали видео еще и про это : При потере фокуса (событие blur, происходит, когда пользователь убрал выделение с поля для ввода) должна происходить проверка на корректность введённого значения и замена его на корректное при необходимости по следующим правилам: Из строки значения должны удаляться все символы, кроме допустимых. Пробелы и дефисы в начале и конце значения должны удаляться. Несколько идущих подряд пробелов или дефисов должны заменяться на один. Первая буква должна приводиться к верхнему регистру, а все остальные - к нижнему. Отправка формы должна добавлять абзац с введёнными фамилией, именем и отчеством под форму без перезагрузки страницы. Каждая отправка формы добавляет новый абзац на страницу. После отправки поля на форме должны очищаться.
Спасибо вам за отклик. Да, кажется это те проверки, которые указаны в задании 1 продвинутого уровня по JS. В этом ролике хотел показать базовый способ валидации. С продвинутым (который показали вы) дела интереснее. Думаю, что можно в будущем записать такой ролик :) Спасибо вам и с наступившим Новым Годом :)
Поизучаю твои видео обязательно. Вроде у же так и верстаю с пол года. А все равно на мелочах то с бургером сыплюсь то еще с чем нибудь! Респект тебе снимай побольше таких видосов!!
Здравствуйте, Ольга. Спасибо за ваш комментарий. Да-да, уже такой ролик есть. Если будет время и желание, обязательно посмотрите :) ua-cam.com/video/l52vbSPGUrg/v-deo.html
Алесандр, спасибо за видео! Все круто и понятно, писала как всегда с вами! Были в процессе вопросы, но вы потом на все отвечали, единственное не совсем поняла это работа с методом contains() - при создании функции для очистки ошибок при повторной валидации.
Спасибо за ваш комментарий и поддержку. Очень приятно, что видео было для вас полезным. Тут дело в следующем. При повторной запуске проверки валидации нам нужно удалить старые сообщения об ошибках. Если они там есть, то проблем не будет. Но если ошибки у поля не было и мы пытаемся ее удалить, то у нас появится ошибка, что элемент не существут. Поэтому мы проверяем наличие класса ошибки. contains возвращает true, если у элемента есть указанный класс. Если он есть, значить можно смело делать удаление :)
Давно искал видео где validaiton делается чисто на Javascript. Наконец-то нашёл ). Всё объяснено чётко и понятно. Уважение к тебе и продолжай в том же духе. Обязательно подписка, лайк и комментарий. Одна просьба, можешь делать видео где делается validation на определённый input.value который проверяет на уникальность среди данных в базе данных(mysql). Заранее спасибо.
Большое спасибо за ваш комментарий и поддержку в виде подписки и комментария. Да, понимаю вас. Сам когда то искал такие примеры. У меня как раз запланирован такой материал для записи. Думаю скоро сделаю ролик с валидацией пароля или логина (связка с сервером) это интересный пример :)
Здравствуйте, Александр! Огромное спасибо за контент! Я не силен пока в 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 } } Проверял, вроде как работает. Но, возможно, есть какие-либо неточности, или "подводные камни"? Или, если работает, то нормально?
Здравствуйте, Александр. Спасибо вам за такой приятный комментарий. Я рад, что видео было для вас полезным :) Кажется, что в коде все хорошо. Единственное, я бы предложил использовать тройное === вместо двойного :) И в этой строчке не хватает кавычки if(input.value == ''){
Большое спасибо вам, Александр, за код ревью! Хороший для меня урок по внимательному отношению к делу. Читаю сейчас "Идеальный программист" Роберта Мартина. Сразу вспоминается понятие "профессионализм". Еще раз большое спасибо вам, Александр! Успехов! P.S. ксатати, хорошая тема найти по различию между разными операторами "=", "==" и "===".@@alex_dudukalo
Александр, приветствую! Я много посвятил сегодня времени (незапланированного) изучению операторов "=", "==" и "===" (в основном по книге "Java Script подробное руководство" 5-е издание. Автор: Дэвид Флэнаган и по некоторым другим источникам). Конечно, я не смог сразу разобраться во ВСЕХ тонкостях этих операторов. Но, продолжая работу со скриптом вашего текущего ролика, хотелось бы услышать, хотя бы очень коротко, обоснование вашей рекомендации в if(input.value == ''){ ... в условии писать "===" а не "==". @@alex_dudukalo
Подача материала и картинка понравились - продолжай в том же духе! Как вариант новые темы - телефонный справочник, веб форма с валидацией и отправкой к примеру в Google Sheets (аналог Google Форм) думаю многим было бы интересно)
Как выполнить 2? 1. все поля обязательны для заполнения после применения к значению метода trim() 2. дата рождения находится в диапазоне от 01.01.1900 до текущей даты 3. год начала обучения находится в диапазоне от 2000-го до текущего года
Александр! Я прям увлекся вашим видеоуроками, не пропускаю ни одного. Ссылки на адреса ваших роликов коллекционирую и храню в своем электронном конспекте, как большую ценность в копилке знаний по js. Спасибо огромное за ваш неоценимый вклад в развитие, ни сколько не преувеличивая, в развитие IT-технологий в стране! С уважением, Михаил!
Александр, спасибо за видео, я сам backend c# разработчик, работаю много с БД, и всякими околосистемными штуками, но паралельно интересуюсь и фронтендом, очень понравился фреймворк React.js + Typescript, но и vanilla js тоже норм, для своих задач, как относитесь к нему и подобным фреймворкам (vue, angular, etc...) ?
Здравствуйте, Антон. Спасибо за ваш комментарий и интересный вопрос. Фреймворки, коими являются Vue, React и другие - это крутые инструмент, которые сильно упрощают разработку веб-приложений (особенно больших) Сильно упрощают и оптимизируют. Отношусь к ним очень положительно, но всегда помню о том, что фреймворк для JS работает на Javascript и для того, что бы их эффективно использовать, нужно знать хорошо JS. Поэтому всегда рекомендую начать изучат фронтент с JS. Вы уже знаете языки программирования, поэтому вам будет проще ))
@@alex_dudukalo спасибо за ответ, я уже в принципе сейчас знаю JS, на базовом уровне, начал разбираться с вёрсткой на flexbox и Grid, пробовал tailwind и Material UI, мне прям доставляет некоторое удовольствие видеть одну систему с разных сторон, как со стороны UI, так и со стороны внутренностей сервисов, API, хранилища, модулей система, да даже некоторые задачи DevOps интересны, так что программирование это одновременно увлечение и работа, радует для себя открывать что-то новое)
Красава спасибо! Всегда с етой валидацией проблема.То Pristine подключу запутаюсь..То еще что нибудь. Твое видео малость поставило на свои места.Мы можем и усложнять ведь код внося поправки на маски или рег.выражения??
Если вы работаете с массивом DOM элементов, например использую функцию querySelectorAll, то думаю удобнее сразу использовать forEach? Этот даст возможность делать такие приемы. document.querySelectorAll('*').forEach(el=>{console.log(el);}) В других случаях, если счетчик не нужен, удобно использовать for of
С телефоном чуть сложнее. Обычно валидацию с номером телефона делают с маской. Тут придется подключать библиотеку дополнительную, что не очень хочется делать ) Но, как идея для реализации видео хорошая
Привет. У меня страница примерно такая же но еще есть checkbox на согласие снизу. Весь интернет облазил и никак не могу найти как сделать еще и для чек бокса на ванильном js. Буду признателен за помощь
Очень полезный материал! А как сделать так чтобы валидация была сразу на нескольких формах (они одинаковые). У меня ошибка возникает на этапе, где в функции валидации выводится в консоль сам элемент form. 7:18
Я бы сказал 100% надо, так как этот framework облегчит твою работу если ты учишься и хочешь работать на веб-разработку, там много встроенных функций который помогает писать меньше код.
Ответ: и да и нет ) Для общего понимания и понимания кода, который написан на jquery можно почитать документацию. В сети оч много примеров и готовых решений на jquery. Но в целом сегодня можно работать и без него. Я для себя отказался от него :) А там, как кому удобно.
еще при вводе пробела или пробелов валидация считает за строку. Я попробовал добавить условие (input.value =='' || input.value == ' ') в required , но это работает только на одном пробеле. Как можно это исправить? Спасибо)
Прописываешь на событии изменения значения инпута чтобы проверял, но лучше будет проверять значения всех инпутов кроме того что у нажатого поля, а то как-то необоснованно нагруженно получится. А насчёт пробелов, в js наверное придётся брать стрингу в виде массива и проверять на наличие символов. Можно наверное как-то получше, но это то что мне в голову пришло.
Не всегда требует этого задача, например мне не нужно браузерное сообщение об ошибке, а я хочу сделать кастомное окно, тогда required не подходит, да и мне нужно сразу же проверить на стороне клиента
так у тебя и так подключение скрипта после элементов HTML идёт))) Нет никакого смысла в defer в этой ситуации, а вот если бы скрипты были бы в head подключены, то смысл бы имело)))
Да, иногда бывают такие случае, когда нужно настроить уникальную валидацию под проект. Например, когда элементы ввода не находятся в одной общей форме. :)
Добрый день. На строчке const allInputs = form.qwerySellectorAll('input') выдаёт ошибку: Uncaught TypeError: form.qwerySellectorAll is not a function. Про ошибку прочёл, но не пойму почему она возникает здесь.....
При создании канала я думал над тем, чем канал и видео будут отличаться от других. И мне кажется, что простота изложения и демонстрация того, что каждый может ошибаться очень поможет и даст уверенность начинающему разработчику. Спасибо за рекомендацию ) Думаю в этом есть смысле ) Я эксперементтирую :)
В целом все работает, но можно было бы и сделать склейки, а не все одним кадром. Зачем мне полчаса смотреть как такой изи код написать не понимаю. Можно было бы даже в шортс это уместить. Ну правда это кому как.
Саша не говори себе делать короткие видео, то что ты записываешь очень понятно и доступно к пониманию, благодаря твоим видео начал на уровень прямо лучше разбираться во всем, много чего уже посмотрел, не останавливайся
Думаю, ты прав :) Спасибо за это сообщение. Буду делать приоритет на содержании, несмотря на время :) Можно, конечно на угоду ютубу и просмотрам делать видео короче, что бы оно чаще попадало в рекомендации, но кажется - это не лучший путь для самого контента )
@@alex_dudukalo Привет, решать конечно только тебе, но ведь есть тайм коды, если кто то более прошареный, он может простой перейти на тот момент, который ему нужен, а те, кто менее разбираются в теме будут смотреть до конца, в любом случае записывая длинные видео с подробным объяснением ты удовлетворяешь обе стороны так сказать, у тебя правда талант, может быть не к слову, но я в школе очень плохо понимал математику до 9 класса, ну не получалось и все, вообще никак, позже в 9 классе у нас сменился преподаватель и за тот год, который она меня учила, я сделал огромный скачок в математических знаниях, и даже сдал экзамен на 4 не списывая, и это я все к тому, что ты тот человек, которого хочется слушать и у которого получается донести суть, возможно потому, что ты пишешь видео с минимальными склейками, и что то гуглишь в процессе, возможно потому, что у тебя тоже есть ошибки и ты их не вырезаешь, а показываешь как выглядит написание кода на самом деле, не могу точно, сказать, что именно делает твои видео такими классными. вероятно все вместе взятое, я перечислил лишь малость, моментов, но главное не останавливайся, благодаря твоим видео я даже начал немного любить JS, потому что до этого все было безуспешно и я не понимал как с ним работать, спасибо тебе
@@Tema_ilit Привет, прочитал сообщение. Да, согласен. Я так же встречал такое в школе и университете. Я убежденно считаю, что учитель (если в слово учитель включить обобщенное понятие) - человек, который может разжечь в ученике желание заниматься изучением темы и предмета. Заинтересовать его так, что бы он сам хотел изучать, капать и находить ответы. Я стремлюсь к этому. Хочу быть именно таким учителем.
Спасибо тебе за эти слова. Именно такие комментарии ориентируют меня и судя по ним я движусь в верном направлении. По крайней мере надеюсь на это. Я рад, что вы написали это сообщение.
Атрибут defer в JavaScript используется для отложенной загрузки скрипта. Когда вы добавляете атрибут defer к тегу , скрипт будет загружен параллельно с загрузкой HTML-документа, но выполнение скрипта будет отложено до тех пор, пока весь HTML-документ не будет полностью загружен.
Это означает, что скрипт, помеченный атрибутом defer, не будет блокировать загрузку остальной части страницы. Это особенно полезно, когда у вас есть скрипты, которые необходимо загрузить до того, как страница будет полностью интерактивной, но они не влияют на начальную загрузку контента или отображение страницы.
красава, с твоих слов все становится понятно с первого раза, не то что в моей онлайн школе, по 10 раз смотришь курс и в итоге взгляд на домашку как у барана на новые ворота. Щас запилю код и моя прога взлетит, наконец-то
что за онлайн-школа?
Все отлично, огромное спасибо за видео! Есть только один нюанс (для меня) - это музыка на фоне, посмотрел уже больше 10 видео на канале и те, что без музыки (либо без такой громкой музыки) воспринимались проще)
Спасибо за комментарий. Про фоновую музыку очен важно было получить мнение. Мне хотелось музыкой немного разбавить атмосферу и сделать восприятие более легче. Но видимо это только мешает. Буду что то придумывать или полностью убирать в следующих видео музыку :) спасибо за полезный коммент
Повторюсь, наверное, если ее немного убавить, то она не будет перебивать основные мысли) посмотрим в следующих видео)
Очень долго искал пытался решить проблему с отправкой формы после валидации, в этом ролике я нашел кк можно решить мою проблему. Спасибо Вам большое за подробное и понятное видео ! Успехов Вашему каналу
Спасибо вам за сообщение с мнением. Я рад, что у вас получилось найти решение проблемы в этом видео :) Старался максимально больше вложить информации в ролик ) Спасибо вам
Отличное обучающее видео, долго сидел сам мучился как написать валидацию, посмотрел видео и разобрался. Спасибо большое!
Спасибо большое за такое полезное видео! Вы, как всегда, все четко и понятно объяснили и разложили по полочкам👍👍👍Мне очень нравится ваша манера подачи материал - легкая и непринужденная (еще и с юмором))). Ваши видео помогают в обучении👍
Большое вам спасибо ) Безумно приятно читать такие отзывы ) Ваши комментарии вдохновляют на записи новых видео :)
Александр, вы как всегда, четко, быстро, интересно и понятно, спасибо большое 🫡
Большое спасибо за ваш комментарий :) Очень приятно. Не смог оперативно ответить на комментарий :(
Огромное спасибо за обучающий материал, легко воспринимается, очень полезное видео! :)
Спасибо вам ) Рад, что ролики для вас полезны. Бубу стараться
Александр, спасибо большое!! Буквально, недавно, настроение учебное пошло на спад, вдохновения нет, и тут Ваше видео с материалом, который только изучила и забыла (как это обычно происходит), начала смотреть и не смогла оторваться, видео больше 30 мин, но зашло, как мороженое. Там и другие Ваши произведения были просмотрены. Это очень здорово! Особенная благодарность за Вашу открытость - не бояться косяков и ошибок, за самопроверку, хоть наглядно показали куда "тыкать" (как начинающий, позволяю себе это слово). После просмотра ваших уроков по ранее усвоенному материалу - всё встает на свои места. Начинающим - обязательно к просмотру.
Спасибо за ваш приятнейший комментарий. Я читаю и улыбаюсь от того, как я рад, что могу помочь роликами)) Значит работаю не зря) Спасибо вам еще раз
Смотрю в 105й раз!!! Повторение - мать Учения😀😀😀Спасибо!!!
Спасибо за такой комментарий🙈 это очень вдохновляет и мотивирует на новые видео 🤗
Отличное объяснение) по-моему даже проще, чем библиотекой пользоваться
Да да, раньше это было сделать сложнее. Приходилось писать код. Следить за прокруткой страницы. Делать вычисления. Это свойство все упростило ))
Александр, вот и добралась до валидации формы!! Лайк и сердечко, как всегда, вашим видео!❤
Спасибо, что оценили ролик и поддержали меня :) Будем работать и стараться)
Всё очень доступно👍
На будущее, как частый зритель таких видео, говорю что очень удобно использовать тайм-коды, а не искать если что-то нужно конкретное перематывая всё видео...
Александр, большое спасибо за подробное видео!!! Спасибо, что понятным языком все объясняете! Вы даете надежду, что все возможно)))
Не часто я оставляю комментарии, но тебе оставлю, спасибо за видео, тебя очень приятно смотреть!
Спасибо вам за комментарий и, за то что решили помочь. Отклики реально помогают и я вижу это в статистике. Буду стараться еще лучше))
Очень доступно объясняете. Спасибо)))
Сергей, спасибо за комментарий. Очень приятно, что вы смотрите ролики. :) Возможно информация пригодится где то )
Ставлю лайк и подписываюсь!)
Очень классно рассказываешь, делая акценты на важных моментах!)
Хорошая тема, спасибо Александр!
Давно планировал записать видео про валидацию. Уверен, что она понадобится в многих проектах :)
Спасибо !!! было бы классно если бы вы записали видео еще и про это : При потере фокуса (событие blur, происходит, когда пользователь убрал выделение с поля для ввода) должна происходить проверка на корректность введённого значения и замена его на корректное при необходимости по следующим правилам:
Из строки значения должны удаляться все символы, кроме допустимых.
Пробелы и дефисы в начале и конце значения должны удаляться.
Несколько идущих подряд пробелов или дефисов должны заменяться на один.
Первая буква должна приводиться к верхнему регистру, а все остальные - к нижнему.
Отправка формы должна добавлять абзац с введёнными фамилией, именем и отчеством под форму без перезагрузки страницы. Каждая отправка формы добавляет новый абзац на страницу. После отправки поля на форме должны очищаться.
Спасибо вам за отклик. Да, кажется это те проверки, которые указаны в задании 1 продвинутого уровня по JS. В этом ролике хотел показать базовый способ валидации. С продвинутым (который показали вы) дела интереснее. Думаю, что можно в будущем записать такой ролик :) Спасибо вам и с наступившим Новым Годом :)
Александр, вы просто супер! Видео очень полезное и вы очень приятный человек) Спасибо за ваш труд!)
Спасибо большое за ваш комментарий и такие приятные слова ☺ ваша поддержка вдохновляет на новые видео 🔥
Спасибо за это видео. Хорошо объясняете. Заходит.
Спасибо за ваш комментарий :) Я очень рад, что видео нравится)) Старался
Поизучаю твои видео обязательно. Вроде у же так и верстаю с пол года. А все равно на мелочах то с бургером сыплюсь то еще с чем нибудь! Респект тебе снимай побольше таких видосов!!
Очень приятно получать такие комментарии 😇 спасибо
спасибо большое за такие полезные видео! лайк и коммент для продвижения и улыбки))
Это вам большое спасибо :) Улыбка точно есть. Надеюсь и продвижение будет. Хорошего вечера :)
Спасибо! Мне очень помогло это видео, так как понадобилось сделать фронтенд часть, а я в ней плохо разбираюсь. Подпишусь в поддержку вашего канала)
Александр, спасибо за понятное видео! Data - атрибуты очень интересная тема, было бы здорово посмотреть
Здравствуйте, Ольга. Спасибо за ваш комментарий. Да-да, уже такой ролик есть. Если будет время и желание, обязательно посмотрите :) ua-cam.com/video/l52vbSPGUrg/v-deo.html
Попрошу скиллбокс , чтобы тебя сделали моим куратором 😂👍🏽 спасибо за инфу )
Да, конечно. Буду рад с вами поработать на курсе :)
Лучший видеоурок про валидацию формы. Спасибо
Про тайм коды писали ниже, подумайте. Действительно будет полезно)
Большое спасибо, очень приятно читать такие комментарии. Это очень мотивирует 😇
Отличное видео! Насчет фоновой музыки полностью согласен с предыдущим автором ;)
Спасибо за комментарий и поддержку. Про музыку мне было важно узнать. Буду исправлять и учитывать это :) Спасибо
Алесандр, спасибо за видео! Все круто и понятно, писала как всегда с вами! Были в процессе вопросы, но вы потом на все отвечали, единственное не совсем поняла это работа с методом contains() - при создании функции для очистки ошибок при повторной валидации.
Спасибо за ваш комментарий и поддержку. Очень приятно, что видео было для вас полезным. Тут дело в следующем. При повторной запуске проверки валидации нам нужно удалить старые сообщения об ошибках. Если они там есть, то проблем не будет. Но если ошибки у поля не было и мы пытаемся ее удалить, то у нас появится ошибка, что элемент не существут. Поэтому мы проверяем наличие класса ошибки. contains возвращает true, если у элемента есть указанный класс. Если он есть, значить можно смело делать удаление :)
Спасибо, супер полезно, ждем новый контент 👍
Спасибо за отклик. Такие комментарии мотивируют на работу )
Александр, спасибо огромное за такие классные видосы. Круто если б еще валидацию формы даты можно было бы рассмотреть.
Спасибо вам :) Записал ваше предложение себе в список роликов для записи. Такое видео в плане :) Спасибо
Спасибо Александр!
Спасибо вам за вашу поддержку :)
500 лайк мой) Спасибо за видео!
Спасибо, очень приятно ))
Прям то что нужно, спасибо за видос
Алесандр, спасибо за видео!
Спасибо вам за вашу поддержку :)
Давно искал видео где validaiton делается чисто на Javascript. Наконец-то нашёл ). Всё объяснено чётко и понятно. Уважение к тебе и продолжай в том же духе. Обязательно подписка, лайк и комментарий. Одна просьба, можешь делать видео где делается validation на определённый input.value который проверяет на уникальность среди данных в базе данных(mysql). Заранее спасибо.
Большое спасибо за ваш комментарий и поддержку в виде подписки и комментария. Да, понимаю вас. Сам когда то искал такие примеры. У меня как раз запланирован такой материал для записи. Думаю скоро сделаю ролик с валидацией пароля или логина (связка с сервером) это интересный пример :)
@@alex_dudukalo да очень интересный и нужный материал будет, буду ждать )
Спасибо, молодец, было очень полезно для меня и понятно
Спасибо за ваш комментарий🤗
Советую ознакомиться с validity у элементов форм. Многие проверки браузер уже делает из коробки
Да, тоже способ. Но часто в практике есть необходимость сделать свою валидацию с уникальными правилами проверок полей )
Спасибо за видео! Лайк, подписка, комментарий)
Спасибо за ваш комментарий и поддержку. С наступающим новым годом :)
Здравствуйте, Александр! Огромное спасибо за контент! Я не силен пока в 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
}
}
Проверял, вроде как работает. Но, возможно, есть какие-либо неточности, или "подводные камни"? Или, если работает, то нормально?
Здравствуйте, Александр. Спасибо вам за такой приятный комментарий. Я рад, что видео было для вас полезным :) Кажется, что в коде все хорошо. Единственное, я бы предложил использовать тройное === вместо двойного :) И в этой строчке не хватает кавычки if(input.value == ''){
Большое спасибо вам, Александр, за код ревью! Хороший для меня урок по внимательному отношению к делу. Читаю сейчас "Идеальный программист" Роберта Мартина. Сразу вспоминается понятие "профессионализм". Еще раз большое спасибо вам, Александр! Успехов! P.S. ксатати, хорошая тема найти по различию между разными операторами "=", "==" и "===".@@alex_dudukalo
Александр, приветствую! Я много посвятил сегодня времени (незапланированного) изучению операторов "=", "==" и "===" (в основном по книге "Java Script подробное руководство" 5-е издание. Автор: Дэвид Флэнаган и по некоторым другим источникам). Конечно, я не смог сразу разобраться во ВСЕХ тонкостях этих операторов. Но, продолжая работу со скриптом вашего текущего ролика, хотелось бы услышать, хотя бы очень коротко, обоснование вашей рекомендации в if(input.value == ''){ ... в условии писать "===" а не "==". @@alex_dudukalo
Спасибо большое Вам за видео полезное, очень интересно!👍👍👍
Большое спасибо вам :)
Спасибо большое, Александр! Для диплома хочу применить без подключения сторонних библиотек.
Спасибо за ваш комментарий🤗 желаю удачи на защите диплома 🍀
Атрибут defer запускает скрипт асинхронно, его можно разместить где угодно, хоть выше хоть ниже
Согласен с вами😇
Ещё раз поразился отсутствию склеек (кроем той что в начале) и одновременно четкости речи и объяснения!
Да, это видео получилось сделать целым без склейки. Но это не лучшая практика ) Много лишнего ):
Классное видео, очень помогло, спасибо.
Подача материала и картинка понравились - продолжай в том же духе! Как вариант новые темы - телефонный справочник, веб форма с валидацией и отправкой к примеру в Google Sheets (аналог Google Форм) думаю многим было бы интересно)
Большое спасибо за поддержку и комментарий. Кстати, на счет справочника отличная идея :) Добавляю себе в список записи видео ))
Спасибо за видео !
Спасибо за вашу поддержку )
просто красава!!спасибо мужик!!! можно, пожалуйста еще практического приминения js!!
Спасибо 👍
Спасибо вам )
Было бы отлично, чтобы вы записали видео по data-атрибутам)
Уже есть, сегодня выложил. Благодаря вашей рекомендации записал :) ua-cam.com/video/l52vbSPGUrg/v-deo.html
Мне понравилось)) лайк лайк
Спасибо вам за поддержку лайком :)
Как выполнить 2?
1. все поля обязательны для заполнения после применения к значению метода trim()
2. дата рождения находится в диапазоне от 01.01.1900 до текущей даты
3. год начала обучения находится в диапазоне от 2000-го до текущего года
Тут нужно добавить новые условия проверки ), как например с maxLength. Кажется у же отвечал на платформе вам? или я ошибаюсь ? :)
Лайк, подписка, комментарий - всё как и просил)
Спасибо за вашу поддержку :) Мне это очень помогает :)
Александр, хотелось бы от Вас видео про часть валидации такой как маска под номер телефона, очень популярная тема сейчас
Она была популярной ещё лет 10 назад
Александр! Я прям увлекся вашим видеоуроками, не пропускаю ни одного. Ссылки на адреса ваших роликов коллекционирую и храню в своем электронном конспекте, как большую ценность в копилке знаний по js. Спасибо огромное за ваш неоценимый вклад в развитие, ни сколько не преувеличивая, в развитие IT-технологий в стране!
С уважением, Михаил!
Ахах, так смешно про лайки и комментарии сказали)) лайк и коммент ❤
Александр, спасибо за видео, я сам backend c# разработчик, работаю много с БД, и всякими околосистемными штуками, но паралельно интересуюсь и фронтендом, очень понравился фреймворк React.js + Typescript, но и vanilla js тоже норм, для своих задач, как относитесь к нему и подобным фреймворкам (vue, angular, etc...) ?
Здравствуйте, Антон. Спасибо за ваш комментарий и интересный вопрос. Фреймворки, коими являются Vue, React и другие - это крутые инструмент, которые сильно упрощают разработку веб-приложений (особенно больших) Сильно упрощают и оптимизируют. Отношусь к ним очень положительно, но всегда помню о том, что фреймворк для JS работает на Javascript и для того, что бы их эффективно использовать, нужно знать хорошо JS. Поэтому всегда рекомендую начать изучат фронтент с JS. Вы уже знаете языки программирования, поэтому вам будет проще ))
@@alex_dudukalo спасибо за ответ, я уже в принципе сейчас знаю JS, на базовом уровне, начал разбираться с вёрсткой на flexbox и Grid, пробовал tailwind и Material UI, мне прям доставляет некоторое удовольствие видеть одну систему с разных сторон, как со стороны UI, так и со стороны внутренностей сервисов, API, хранилища, модулей система, да даже некоторые задачи DevOps интересны, так что программирование это одновременно увлечение и работа, радует для себя открывать что-то новое)
Здравствуйте! Очень круто! Но я бы еще метод trim() впихнул, он удалит все пробелы
Да да, этот метод бы помог убрать лишние пробелы ) Не пришло в голову во время записи видео :) Спасибо
Полезное видео. Спасибо.
Спасибо большое!
отличное видео! спасибо :)
Спасибо за ваш комментарий 😊
Спасибо, брат, очень помог
Спасибо за отзыв 💪
Спасибо, хорошо объяснил)) 👍 Подскажи как сделать подсветку слов в вс коде как у тебя ?)) Чтоб querySelector жёлтым, form оранжевым и тд)
Спасибо за ваш комментарий. Вы можете в настройках текущей темы выбрать тему Monokai и тогда у вас будет такое же оформление :)
@@alex_dudukalo спасибо)
@@alex_dudukalo спасибо)
Красава спасибо! Всегда с етой валидацией проблема.То Pristine подключу запутаюсь..То еще что нибудь. Твое видео малость поставило на свои места.Мы можем и усложнять ведь код внося поправки на маски или рег.выражения??
Рад, что видео было для вас полезным. Да, конечно. Вы можете дополнять код и делать его лучше :)
Если коротко, это очень круто и понятно, спасибо!
Спасибо за обратную связь 🤗
Вопрос возник. Лучше использовать цикл for of или for each? Что выполняется быстрее или нет разницы?
Если вы работаете с массивом DOM элементов, например использую функцию querySelectorAll, то думаю удобнее сразу использовать forEach? Этот даст возможность делать такие приемы. document.querySelectorAll('*').forEach(el=>{console.log(el);})
В других случаях, если счетчик не нужен, удобно использовать for of
Спасибо, с номером телефона бы ещё посмотреть)
С телефоном чуть сложнее. Обычно валидацию с номером телефона делают с маской. Тут придется подключать библиотеку дополнительную, что не очень хочется делать ) Но, как идея для реализации видео хорошая
Спасибо!
И вам :)
Хорошие у вас уроки, смотрел несколько, интересно. Делал валидацию с помощью ивент focus/blur, код получается меньше.
Привет. У меня страница примерно такая же но еще есть checkbox на согласие снизу. Весь интернет облазил и никак не могу найти как сделать еще и для чек бокса на ванильном js. Буду признателен за помощь
Здравствуйте. А может возникнуть конфликт, если изначально в input поставили value, я имею ввиду в HTML?
Спасибо за видео.
Спасибо за ваш комментарий 🤗
Очень полезный материал! А как сделать так чтобы валидация была сразу на нескольких формах (они одинаковые). У меня ошибка возникает на этапе, где в функции валидации выводится в консоль сам элемент form. 7:18
Зачем в if(validation(this)) добавлять "== true" если if и так возвращает только true/false на любое условие в скобках?
Классное объяснение! Но по-английски неправильно пишите) 0)
Спасибо вам за комментарий ) да, есть у меня такая проблема )) борюсь с ней
Классно!
Спасибо 🔥 надеюсь и другие видео канала будут вам полезны))
Александр, у меня вопрос. Стоит ли учить jquery в 2023 году?
Я бы сказал 100% надо, так как этот framework облегчит твою работу если ты учишься и хочешь работать на веб-разработку, там много встроенных функций который помогает писать меньше код.
Ответ: и да и нет ) Для общего понимания и понимания кода, который написан на jquery можно почитать документацию. В сети оч много примеров и готовых решений на jquery. Но в целом сегодня можно работать и без него. Я для себя отказался от него :) А там, как кому удобно.
@@alex_dudukalo Спасибо!
братик лайкнул подписался
Спасибо за лайк и поддержку :) Это супер приятно и помогает каналу ):
Приветствую , отвечаю на вопрос , не строгое равенство (==) , строгое равенство (===).
Здравствуйте, совершенно верно === сравнивает с учетом типа переменной )
И почему, например, если у меня форма в модальном окне, я не могу после preventDefault() закрыть её никаким способом?
Добрый вечер! Подскажите, а можно зашифровать данные при отправке на почту?
А можно как-то реализовать, что при удалении или добавлении символов, он автоматический проверял валидацию? ( без нажатии кнопки или энтера ).
еще при вводе пробела или пробелов валидация считает за строку. Я попробовал добавить условие (input.value =='' || input.value == ' ') в required , но это работает только на одном пробеле. Как можно это исправить? Спасибо)
Прописываешь на событии изменения значения инпута чтобы проверял, но лучше будет проверять значения всех инпутов кроме того что у нажатого поля, а то как-то необоснованно нагруженно получится. А насчёт пробелов, в js наверное придётся брать стрингу в виде массива и проверять на наличие символов. Можно наверное как-то получше, но это то что мне в голову пришло.
Работет с мобильного браузера?
😢а как же атрибут инпута required? Он с коробки упрощает валидацию. А уже нa стороне сервера php проверяет на пустую строку на спецсимволы
Не всегда требует этого задача, например мне не нужно браузерное сообщение об ошибке, а я хочу сделать кастомное окно, тогда required не подходит, да и мне нужно сразу же проверить на стороне клиента
Дико раздражает тихая музыка на фоне. Мешает сосредоточиться. Без музыкального сопровождения лучше
Да, получил много отзывов по этой теме :) Теперь, стараюсь не злоупотреблять фоновой музыкой. Спасибо за замечание :)
Не понимаю как сделать надпись "Поле не заполнено" над полем ввода, а не под полем.
Попробуйте использовать prepend вместо append Это поможет добавить текст ошибки перед инпутом)
зачем устаревший способ взятие элементов document.getElementById если есть document.querySelector
Подскажите, почему getElementById устаревший ? :)
поиск элемента по id быстрее проходит.
@@alex_dudukalo Корректніше писати не модно в 2к23 писати getElementById ;D
так у тебя и так подключение скрипта после элементов HTML идёт))) Нет никакого смысла в defer в этой ситуации, а вот если бы скрипты были бы в head подключены, то смысл бы имело)))
Спасибо за замечание. По опыту скажу, что лучше добавлять на всякий случай. Иногда подключение JS файла каким то образом может оказаться в head :)
У меня вопрос к тем кто работает фронтом. Кто нибудь щас с нуля без библиотек вообще пишет валидацию?
Да, иногда бывают такие случае, когда нужно настроить уникальную валидацию под проект. Например, когда элементы ввода не находятся в одной общей форме. :)
Добрый день. На строчке const allInputs = form.qwerySellectorAll('input') выдаёт ошибку: Uncaught TypeError: form.qwerySellectorAll is not a function. Про ошибку прочёл, но не пойму почему она возникает здесь.....
Здравствуйте, скорее всего в переменной form нет формы. Попробуйте вывести form в консоль. Я думаю там ее нет :)
У вас опечатка, не qwery, а query
@@ИльдарМухаметов-ц4х 🤣🤣🤣
оставляю комментарий
Не говори таких слов: я не помню, я не знаю, я забыл - эти слова сокращают твою аудиторию
Не извиняйся за длинные видео
При создании канала я думал над тем, чем канал и видео будут отличаться от других. И мне кажется, что простота изложения и демонстрация того, что каждый может ошибаться очень поможет и даст уверенность начинающему разработчику. Спасибо за рекомендацию ) Думаю в этом есть смысле ) Я эксперементтирую :)
@@alex_dudukalo Полностью согласен
🍉
+
В целом все работает, но можно было бы и сделать склейки, а не все одним кадром. Зачем мне полчаса смотреть как такой изи код написать не понимаю. Можно было бы даже в шортс это уместить. Ну правда это кому как.
покажиш болше такие ролики