Тёмный

10 Form Validation Tips Every Web Developer SHOULD KNOW! 

James Q Quick
Подписаться 200 тыс.
Просмотров 12 тыс.
50% 1

Don't make these mistakes while validating HTML forms! Learn to take advantage of built-in HTML properties and add custom validation with JavaScript.
*Newsletter*
Newsletter 🗞 - www.jamesqquick.com/newsletter
*DISCORD*
Join the Learn Build Teach Discord Server 💬 - / discord
Follow me on Twitter 🐦 - / jamesqquick
Check out the Podcast - compressed.fm/
Courses - jamesqquick.com/courses
*QUESTIONS ABOUT MY SETUP*
Check out my Uses page for my VS Code setup, what recording equipment I use, etc. www.jamesqquick.com/uses
*TIMESTAMPS*
00:00 - Intro
00:30 - Use the Correct HTML Input Types
01:30 - Use Built in Validator HTML Properties
02:30 - Pattern Matching with Regex
03:20 - Define Custom Tooltips for Built-in Validators
04:15 - Don't Validate Too Quickly
05:10 - Use Specific Validation Messages
05:40 - Highlight Invalid Inputs
06:15 - Have Static Heights for Validation Messages
07:00 - Remove Error Messages When Valid
08:00 - Add Server-side Validation

Опубликовано:

 

1 июн 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 21   
@ste-fa-no
@ste-fa-no 7 месяцев назад
I didn't know about the "title" being used in the error suggestion, that's cool! And I totally agree: true validation in the server, front-end validation is just UX.
@JamesQQuick
@JamesQQuick 7 месяцев назад
yeahhh! glad you learned something!
@ste-fa-no
@ste-fa-no 7 месяцев назад
@@JamesQQuick always! 🙌
@user-mq3em4rl5r
@user-mq3em4rl5r 2 месяца назад
loved this video!!
@bradgarropy
@bradgarropy 6 месяцев назад
Woah, I didn't know about the `title` attribute!
@JamesQQuick
@JamesQQuick 6 месяцев назад
Learned it from Kevin Powell!!
@sreehari872
@sreehari872 4 месяца назад
Great video😊
@francescociulla
@francescociulla 6 месяцев назад
The amount of videos I have to watch on your channel is just insane ahahah. But best of luck man 🔥
@JamesQQuick
@JamesQQuick 6 месяцев назад
Haha thanks!!
@bikebrainstudio
@bikebrainstudio 7 месяцев назад
Very interesting. I see that custom message in the title attribute only works if the pattern attribute is set (even empty). Is that right?
@BenRogersWPG
@BenRogersWPG 7 месяцев назад
Great video! Thank you
@JamesQQuick
@JamesQQuick 7 месяцев назад
Glad you liked it!
@gamingwolf3385
@gamingwolf3385 7 месяцев назад
The first comment please , upload video about session based auth in details , withour talking about the difference with token (we know it hhh )
@wadoudazer6906
@wadoudazer6906 5 месяцев назад
hello james , thank you for this beautiful video , can you share with us the source code or the repository .you helped me a lot , thank you :)
@toblamabor7072
@toblamabor7072 7 месяцев назад
What about using Zod?
@phoneywheeze9959
@phoneywheeze9959 6 месяцев назад
5:01 it's actually annoying that you have to tab away everytime to check if your username is valid or not instead I'd prefer the case where it tells me along when I'm typing
@JamesQQuick
@JamesQQuick 6 месяцев назад
Yeah other people have said similar things. Goes to show there are multiple approaches!
@makandriival8507
@makandriival8507 6 месяцев назад
Those popup validation msgs looks ugly, anyone can point me in the right direction how to style it?
@makandriival8507
@makandriival8507 6 месяцев назад
my bad :) had to watch the video till the end first :)
@JamesQQuick
@JamesQQuick 6 месяцев назад
Bahahaha glad it helped
Далее
5 JavaScript Concepts You HAVE TO KNOW
9:38
Просмотров 1,4 млн
JavaScript Client-side Form Validation
29:07
Просмотров 707 тыс.
CSS Tips And Tricks I Wish I Knew Before
12:12
Просмотров 415 тыс.
Use these instead of vh
6:06
Просмотров 451 тыс.
The BEST way to do form validation in JavaScript
59:45
Learn HTML Forms In 25 Minutes
24:56
Просмотров 948 тыс.
Svelte 5 is a beast, but is it worth switching?
37:55
Improve your form validation hints without JS!
12:46
Просмотров 65 тыс.
You might not need useEffect() ...
21:45
Просмотров 144 тыс.
JavaScript Pagination in ~10 Minutes (Super EASY!!)
13:06