Validação de forms customizada com HTML e JavaScript | Code/Drops #32
? Menu
00:00:00 | Intro
00:01:00 | Explicação do HTML inicial
00:02:33 | Explicação do CSS inicial
00:04:43 | Iniciando o HTML
00:07:45 | Droppando e Explicando CSS
00:17:16 | Iniciando o Código JS
00:22:19 | Trabalhando com o evento "invalid"
00:25:11 | Trocar mensagem padrão do campo "required"
00:35:36 | Customizando layout da mensagem de validação
00:44:05 | Refatorando o código
00:53:15 | Customizando o campo de erro
00:54:15 | Customizando mensagens de validação para cada tipo de campo e cada tipo de erro
01:00:04 | Despedida
??♀️ Bora codar!
Fala Dev Mayk Brito na área ?
Você sabia que o HTML já possui um sistema de validação embutido? E que você pode usar o atributo "required" para ativar a validação padrão do HTML?
Mas essa validação é um pouco engessada. Os textos e a estilização, precisam de um trato especial hehe.
No Code Drops de hoje, nós iremos te mostrar uma ideia para você trabalhar com essa API e fazer customizações com CSS e Javascript.
Então, bora codar! ?
? Links
Código inicial: index.html, style.css
https://gist.github.com/maykbrito/b72c48236868ac1bfc530cc12c5bbdee
Código final: index.html, style.css, scripts.js
https://gist.github.com/maykbrito/951c41c1ecd87ccfcff443a38e79712f
----
Acompanhe a Rocketseat nas redes sociais:
Site: https://www.rocketseat.com.br
Twitter: https://www.twitter.com/rocketseat
Facebook: https://www.facebook.com/rocketseat
Instagram: https://www.instagram.com/rocketseat_oficial
Comunidade: http://comunidade.rocketseat.com.br
Blog: https://rocketseat.com.br/blog
Inscreva-se na nossa Newsletter!
https://rocketseat.ck.page/b4b4e90122
Ouça também:
Spotify: https://spoti.fi/2PwXeUp
Anchor.fm: https://anchor.fm/faladev
Apple Podcasts: https://apple.co/2pReOrN
Google Podcast: http://bit.ly/2Cgj077
Что делает видео по-настоящему запоминающимся? Наверное, та самая атмосфера, которая заставляет забыть о времени. Когда вы заходите на RUVIDEO, чтобы посмотреть онлайн «Validação de forms customizada com HTML e JavaScript | Code/Drops #32», вы рассчитываете на нечто большее, чем просто загрузку плеера. И мы это понимаем. Контент такого уровня заслуживает того, чтобы его смотрели в HD 1080, без дрожания картинки и бесконечного буферизации.
Честно говоря, Rutube сегодня — это кладезь уникальных находок, которые часто теряются в общем шуме. Мы же вытаскиваем на поверхность самое интересное. Будь то динамичный экшн, глубокий разбор темы от любимого автора или просто уютное видео для настроения — всё это доступно здесь бесплатно и без лишних формальностей. Никаких «заполните анкету, чтобы продолжить». Только вы, ваш экран и качественный поток.
Если вас зацепило это видео, не забудьте взглянуть на похожие материалы в блоке справа. Мы откалибровали наши алгоритмы так, чтобы они подбирали контент не просто «по тегам», а по настроению и смыслу. Ведь в конечном итоге, онлайн-кинотеатр — это не склад файлов, а место, где каждый вечер можно найти свою историю. Приятного вам отдыха на RUVIDEO!
Видео взято из открытых источников Rutube. Если вы правообладатель, обратитесь к первоисточнику.