JavaScript Client-side Form Validation

  Рет қаралды 709,096

Florin Pop

Florin Pop

Күн бұрын

👉 Daily Coding Challenges: iCodeThis.com/?ref=ytb-js-form
In this tutorial, we're going to learn how to add form validation on the client side using #JavaScript. Also, we'll have two different styles for the inputs: success and error - both showing the different states the inputs can have. #form #validation
Source Code: codepen.io/FlorinPop17/pen/OJ...
Learn JavaScript Array Methods: • JavaScript Array Methods
00:00 - 1. Intro
01:37 - 2. HTML/CSS implementation
15:13 - 3. JavaScript implementation
---
Support my channel:
💜 Become a Member of the Poppers Family and receive special perks: kzfaq.infojoin
💜 Donate via StreamLabs: streamlabs.com/florinpop2/
💜 Donate via PayPal: paypal.me/florinpop17
💜 Become a patron: / florinpop17
Thank you! 🙏
---
👨‍👩‍👧‍👦 Join the Discord family: / discord
---
Follow me on:
📃 Website/Blog: florin-pop.com
👉 Twitter: / florinpop1705
👉 Linkedin: / florinpop17
👉 Instagram: / florinpop17
👉 Facebook: / florinpop17
👉 Github: github.com/florinpop17
👉 Dev.to: dev.to/florinpop17
👉 Twitch: twitch.com/florinpop17

Пікірлер: 499
@FlorinPop
@FlorinPop 4 жыл бұрын
Learn how to use 24 different JavaScript Array Methods: kzfaq.info/sun/PLgBH1CvjOA62PBFIDq55-S6Beivje30A2
@ignaciobascougnet8471
@ignaciobascougnet8471 4 жыл бұрын
how you can refresh your misstake inputs, if they are all cons¿
@mrollins8277
@mrollins8277 3 жыл бұрын
Bro your video was nice but this validation is not working in my form, So could u please tell me what can be the problem or ambiguity.
@SpscMedia
@SpscMedia 3 жыл бұрын
Florin pop your are doing amazing. I want to tell you one thing zoom in the screen little bit, I am facing difficulties on my Palm device.
@utkarshtenguria3836
@utkarshtenguria3836 3 жыл бұрын
Which software
@turaleyyub5746
@turaleyyub5746 3 жыл бұрын
FLORIN POP can you say please why it doesnt go another page? you forgot about action="somewhere.php"
@thomassankara9980
@thomassankara9980 3 жыл бұрын
This was the first video from Florin I ever watched. I came back here today for reference for a project I'm working on. Thanks Florin
@archangel0137
@archangel0137 3 жыл бұрын
This is hands-down the FINEST form validation tutorial I've ever seen... big salute to you sir!
@hughmungus1767
@hughmungus1767 4 жыл бұрын
Thank you Florin, that was very helpful! My JavaScript was VERY rusty and this helped me develop good solid client-side validation checking on the forms I'm using in my Laravel project.
@FlorinPop
@FlorinPop 4 жыл бұрын
I’m very happy to hear this!!
@jryan2356
@jryan2356 3 жыл бұрын
I’ve been pulling my hair out trying to understand form validation properly.. thank god I found your video! So simple to understand now, and you’ve gained a new subscriber
@worthitmakethis7792
@worthitmakethis7792 2 жыл бұрын
Thanks so much for this! I have been having a hard time grasping this and have spent over a week reading and watching every video I could find. I am so lucky to have found this! You are awesome!!!
@dontavious3591
@dontavious3591 Жыл бұрын
I really appreciate this video. It helped me out tremendously with my first JavaScript project which landed me the opportunity to get my first gig as a developer. Keep up the great work!
@tenminutetokyo2643
@tenminutetokyo2643 4 жыл бұрын
Best tut I’ve ever seen on YT. Why cant everyone make tuts this straightforward.
@FlorinPop
@FlorinPop 4 жыл бұрын
Aww... thank you! I’m happy you like it! ☺️
@hikari1690
@hikari1690 3 жыл бұрын
@@FlorinPop correct me if I’m wrong but the html email check is the same thing as the regex check right? Its just checking for an @ domain. So a@a.c will still work even with the custom function
@baithivinaykumar
@baithivinaykumar 3 жыл бұрын
@@FlorinPop hii sir can you probably provide your whatsapp I have some doubts
@aleb687
@aleb687 4 жыл бұрын
great video Florin! Just found amazing CSS shortcuts: m0 -> margin: 0; p0 -> padding: 0; l0 -> left: 0; t0 -> top: 0; ff -> font-family: sans-serif (with font highlighted ready to be changed) bgc -> background-color: #fff (with fff highlighted ready to be changed) and so forth and so on... Saves tons of typing !!
@FlorinPop
@FlorinPop 4 жыл бұрын
They do indeed! 😃
@anilporella7201
@anilporella7201 3 жыл бұрын
The Best ever made Tutorial on form validations through javascript. Great. A Big Salute
@FlorinPop
@FlorinPop 3 жыл бұрын
Thank you! I’m very happy you found it useful!
@kenkioqqo
@kenkioqqo 3 жыл бұрын
Maximum appreciation, Florin. Your tutorials is the best way for beginners to learn how to practically add JavaScript to HTML&CSS files. I've been learning HTML & CSS, and JavaScript syntax from online platforms. But I've not found anyone teaching how to bring them all together in a practical manner like you have. You've literally given me the missing link. My 'Aha!" moment! Great work, Mr Pop.
@whoruwonder
@whoruwonder 2 жыл бұрын
try whatsdev's tutorials
@geebsayshi
@geebsayshi 4 жыл бұрын
You're the best tbh. Your tutorials are straightforward and practicable. I only started to enjoy learning programming when I found your channel. Thank you
@FlorinPop
@FlorinPop 4 жыл бұрын
Aww! That’s so nice of you to say! I’m happy to hear I was helpful 😃
@kensleylewis
@kensleylewis 3 жыл бұрын
You make CodePen look it's the "Chosen One!!!" Love it!
@zdarofMERGAITES
@zdarofMERGAITES 4 жыл бұрын
Great lesson, teacher. Your VS skills are something really coool!
@riteshmahajan5209
@riteshmahajan5209 3 жыл бұрын
one of the wonderful quality tutorial on form creation, styling and validation. :)))) Thanks Florin ...I don't know how to make a thumbs up..
@mizuesato4775
@mizuesato4775 4 жыл бұрын
Thank you Florin 😊 I like this video to learn about HTML CSS and Javascript. I hope to see more video especially for beginner.
@syner144
@syner144 3 жыл бұрын
DUDE IM SO HAPPY THAT I SUBSCRIBED TO YOU I SWEAR IM GETTING MY LAPTOP AND IM GONNA LEARN MUCH FROM YOU LOVE YOU BRO FROM THE NETHERLANDS
@RedEyedJedi
@RedEyedJedi 4 жыл бұрын
Thanks, Florin this is the perfect amount of detail. Excellent tutorial!
@RedEyedJedi
@RedEyedJedi 4 жыл бұрын
@@FlorinPop No, thank you for putting in the time and effort to make it. I really appreciate it :)
@vuongtran5799
@vuongtran5799 4 жыл бұрын
Love the way you control your code, hope to see more video especially for frontend JS. Thanks
@FlorinPop
@FlorinPop 4 жыл бұрын
Will do!
@nohaderwa
@nohaderwa 2 жыл бұрын
Straight to the point 👏🏻👏🏻 Keep the hard work, man.
@tradewinds9832
@tradewinds9832 4 жыл бұрын
Excellent tutorial! You deserve more views. Awesomeness!
@jflo911b
@jflo911b 3 жыл бұрын
Thanks so much Florin! Awesome tutorial!
@elrasheedsiddig7711
@elrasheedsiddig7711 3 жыл бұрын
This is a great and helpful video. I had an assignment and it helped me a lot. Thank you!
@arjanelor9568
@arjanelor9568 3 жыл бұрын
I appreciate the project challenge you have there it helps me to practice my JS coding
@ekenealamezie1898
@ekenealamezie1898 3 жыл бұрын
I really love your tutorial because it's awesome and looks way cool! It's actually my first time seeing your video!
@ninja-gh
@ninja-gh 4 жыл бұрын
Awesome lecturer, neat and clean way of validating user inputs. Thanks from India
@amitsinha5621
@amitsinha5621 4 жыл бұрын
This vedio got something in css and js both, woah it feels good clearing the doubt.
@peters7278
@peters7278 4 жыл бұрын
It's cool to see you type the code. I'm new and learning to use editors, so I like to watch the little things that pros do. I'm not sure if you have a "tips and tricks" for editors like Codepen, VisualStudio Code, or any other ones that you use in daily work, but I'd be interested in seeing a basic intro to these as well.
@FlorinPop
@FlorinPop 4 жыл бұрын
Noted! Thank you
@gauravpanwar4413
@gauravpanwar4413 3 жыл бұрын
After searching for so many ways this video give me the best solution. Thanks a lot 😊
@decall
@decall 3 жыл бұрын
thank you Florin for the great tutorial, it was just what I needed..
@aurielklasovsky1435
@aurielklasovsky1435 2 жыл бұрын
That was awesome. Thank you so much for this great tutorial!
@rahulghodmare5394
@rahulghodmare5394 2 жыл бұрын
Hello Sir, I am Js learner ,typically i saw most video.But I like these video. Which clear and straightforward.
@edgarspujats8282
@edgarspujats8282 2 жыл бұрын
I know i'm kinda late but still thank you very much ! Your code is very clean and understandable, very appreciate your work !! :)
@Anahitacode
@Anahitacode Жыл бұрын
Best tutorial a have ever seen) Thank You
@dominicamaljoef6693
@dominicamaljoef6693 4 жыл бұрын
Thanks for this great video Florin...
@ankurtyagi4770
@ankurtyagi4770 4 жыл бұрын
Thanks for the great effort for community.
@renatoloefstop
@renatoloefstop Жыл бұрын
nice video. I liked the the design of the form and the logic behind the validation.
@moussaouikhouloud
@moussaouikhouloud 3 жыл бұрын
you r the best u save my university degree this year all love
@kulvannda
@kulvannda 3 жыл бұрын
too xD
@pascalgage2695
@pascalgage2695 3 жыл бұрын
A very nice work !!! Excellent ! Thanks ! I'm just using a text editor but it works !
@nickwoodward819
@nickwoodward819 2 жыл бұрын
Just a suggestion - when you're writing your css you jump up and down the block adding properties. This means that if you're following along, but perhaps a property or two behind, you look up at the screen and the property you've just written is no longer visible (off the bottom of the screen) as you've gone to the top of the style block to write a different property. Can be pretty jarring! But thanks, great guide!
@williamlowry
@williamlowry 3 жыл бұрын
this was an absolutely phenomenal tutorial. thank you so much!!
@AdriiPing
@AdriiPing 4 жыл бұрын
As always helping me a lot w/ ur vids :)
@cynthiamanor6565
@cynthiamanor6565 3 жыл бұрын
Great tutorial! Thanks for posting.
@nahorovidiu8307
@nahorovidiu8307 4 жыл бұрын
Felicitati, Florin!
@FlorinPop
@FlorinPop 4 жыл бұрын
Multumesc 😃
@TheDream975
@TheDream975 2 жыл бұрын
I like your code. Clear and understandable !👍👍
@legitimategamerhd6773
@legitimategamerhd6773 4 жыл бұрын
I've been using vscode for about a month and I never knew that shorthand element creator feature @ 2:07 was a thing. Thanks :)
@likhithsasank8017
@likhithsasank8017 2 жыл бұрын
I have watched many tutorials ...But the way of writing code by florin is amazing ✌️🎉..Love from india❤️
@juantato2012
@juantato2012 3 жыл бұрын
This is by far the best tutorial I've ever followed. Thank you so much!
@isaackash2401
@isaackash2401 2 жыл бұрын
I was very glad to watch this tutorial.
@The_Daily_Shorts
@The_Daily_Shorts 4 жыл бұрын
Thanks for making this video. it's helpful!
@FlorinPop
@FlorinPop 4 жыл бұрын
Gladly
@ATIWatchReviews
@ATIWatchReviews 3 жыл бұрын
Florin is definitely my new favourite instructor. Thank you
@schustersilva9852
@schustersilva9852 Жыл бұрын
You really helped me with this one! Thank you very much! Your tutorial is awesome!
@FlorinPop
@FlorinPop Жыл бұрын
🙏 glad to hear that
@lucasruiz6176
@lucasruiz6176 Жыл бұрын
Very neat video in terms of the information provided, thank you very much for helping us.
@Shriram-ty2kk
@Shriram-ty2kk 3 жыл бұрын
Clear as a crystal!
@mahdimotallebi7207
@mahdimotallebi7207 2 жыл бұрын
Thank you Florin Great tutorial
@zubaydullo_abdirakhmonov
@zubaydullo_abdirakhmonov 3 жыл бұрын
Thanks for such a useful video, keep up the good work.
@AlMagic911
@AlMagic911 Жыл бұрын
Great video, thanks!!
@kimjiyoung8655
@kimjiyoung8655 2 жыл бұрын
Thank you so much Florin! :D
@kto523
@kto523 Жыл бұрын
Thank you for this video!
@ajitganjave8837
@ajitganjave8837 11 ай бұрын
🎯 Key Takeaways for quick navigation: 00:00 🛠️ The video tutorial demonstrates how to implement client-side form validation using JavaScript for a form with four input fields: username, email, password, and password check. 01:22 📝 The tutorial is divided into two parts: HTML/CSS implementation and JavaScript implementation. Viewers can skip the HTML/CSS section if they prefer. 05:42 🎨 The HTML/CSS part focuses on building the basic layout and styling of the form, including form containers, headers, labels, inputs, icons, and error messages. 15:25 ⌨️ JavaScript code is used to add event listeners to the form submission and validate the inputs' values. 19:27 ✅ The form validation checks if the input fields are empty and if the email is in a valid format using regular expressions. 23:47 🔑 For invalid inputs, appropriate error messages are displayed, and error classes are added to indicate errors in the form controls' styling. 28:20 🎊 As an extra challenge, viewers are encouraged to implement a success message when all form inputs have valid values.
@wesleyfeller2114
@wesleyfeller2114 4 жыл бұрын
I would love to see a video of a contact form with the form validation and the feature of having it emailed to your gmail 😀😀 solid video!
@sangramnath3452
@sangramnath3452 4 жыл бұрын
@@FlorinPop Please do consider..🙂
@senju31
@senju31 4 жыл бұрын
I literally just solved this. I can share the source code if you want.
@lauraochoa96
@lauraochoa96 4 жыл бұрын
@@senju31 I'm trying the same. It would be a great help for me.
@mknight7209
@mknight7209 3 жыл бұрын
@@senju31 please do
@libertad83y
@libertad83y 4 жыл бұрын
Thank you Florin, invaluable tutorial, thumbs up!
@FlorinPop
@FlorinPop 4 жыл бұрын
👍🏻👍🏻👍🏻
@Omar_Muhammad
@Omar_Muhammad 2 жыл бұрын
Thanks, man very helpful and informative video.
@rakeshkharvi3029
@rakeshkharvi3029 3 жыл бұрын
You just helped me a lot buddy ❤️
@helgeope
@helgeope 3 жыл бұрын
Very well explained!
@faruquedewan
@faruquedewan Жыл бұрын
A lifesaver. Thanl You! :)
@sabuein
@sabuein 3 жыл бұрын
Thank you, Florin.
@hamzajirah4856
@hamzajirah4856 4 жыл бұрын
Good job, Florin.
@digihz_data
@digihz_data 2 жыл бұрын
Great presentation.
@alfredodiez2170
@alfredodiez2170 2 жыл бұрын
great job! thanks for sharing!
@fernandocueto5652
@fernandocueto5652 3 жыл бұрын
Thanks pal, you saved my day
@medmess254
@medmess254 3 жыл бұрын
Thank you for the great job. It would be nice to explain how to submit the form after data validation.
@satishkoni6143
@satishkoni6143 3 жыл бұрын
This is just awesome ❤️❤️
@John-wx3zn
@John-wx3zn 2 жыл бұрын
Thank you. I learned a lot.
@zeinab_3107
@zeinab_3107 2 жыл бұрын
Amazing bro thanks so much from Iran❤
@quickfoods6746
@quickfoods6746 3 жыл бұрын
This is organized and really very easy to understand, Thank you Florin
@syberiaok
@syberiaok 4 жыл бұрын
Super great tutorial and very well and simply explained for a beginner like me!thanks a lot!!!!
@FlorinPop
@FlorinPop 4 жыл бұрын
Thank you for watching 😃
@Onlineteaching10
@Onlineteaching10 3 жыл бұрын
NICE INFORMATIVE .WELL DONE
@swapnilcodes
@swapnilcodes 2 жыл бұрын
Awesome tutorial...💥♥️
@zarakikenpachi1799
@zarakikenpachi1799 4 жыл бұрын
you are the best , thank you
@FlorinPop
@FlorinPop 4 жыл бұрын
😍
@sadinsadin5044
@sadinsadin5044 3 жыл бұрын
you are just awesome. love you.
@romanbondarenko9892
@romanbondarenko9892 3 жыл бұрын
Thanks, man! You Awesome!
@l3_p14f9
@l3_p14f9 3 жыл бұрын
First, thank you for not having shitty music at all. Second, thank you for being specific. Third, I subscribed after this, rock on!
@FlorinPop
@FlorinPop 3 жыл бұрын
Thank you 🙏
@frombeyond3667
@frombeyond3667 2 жыл бұрын
Thanks dude!
@robertoenriquechavezrodrig731
@robertoenriquechavezrodrig731 2 жыл бұрын
Thank you so much, bro, this is a great tutorial. God bless you! Regards from Russia. 04.12.2021
@raigeki002
@raigeki002 2 жыл бұрын
what editor are you using for your videos? i like the 'auto-update' rendering on the output side!
@mansoormohmand5852
@mansoormohmand5852 4 жыл бұрын
easy and wonderful
@abdelrahmanalisayed1250
@abdelrahmanalisayed1250 3 жыл бұрын
What awesome video!!
@rullyahsani4613
@rullyahsani4613 Жыл бұрын
awesome, thanks for tutorial
@FlorinPop
@FlorinPop Жыл бұрын
You’re welcome
@renemorales9364
@renemorales9364 3 жыл бұрын
great tutorial 👍
@ivanblazevic1045
@ivanblazevic1045 4 жыл бұрын
Great tutorial! Very useful. Especially for me 'cause I just learning about Form Validation in PHP, so now I could compare. Thank You Florin!
@FlorinPop
@FlorinPop 4 жыл бұрын
Your welcome 🙏
@ovidiublaga1
@ovidiublaga1 4 жыл бұрын
Foarte misto!
@FlorinPop
@FlorinPop 4 жыл бұрын
Ma bucur ca iti place 😃
@ovidiublaga1
@ovidiublaga1 4 жыл бұрын
@@FlorinPop am aflat de canal de la traversy media. Am o grămadă de treaba zilele astea :) super tare. Meriți mult mai mti subscriberi
@FlorinPop
@FlorinPop 4 жыл бұрын
Ovidiu Blaga Multumesc pentru cuvintele frumoase! De unde ai aflat de la Brad? Twitter sau KZfaq?
@ovidiublaga1
@ovidiublaga1 4 жыл бұрын
@@FlorinPop de la videoul cu password generator în javascript
@lianabagiyan6740
@lianabagiyan6740 3 жыл бұрын
Cool! Thanks a lot!
@AbuRaihan-ed9ef
@AbuRaihan-ed9ef 3 жыл бұрын
Beautyful work
@fullgames926
@fullgames926 2 жыл бұрын
Elegant code ❤️
@abdishakur2489
@abdishakur2489 4 жыл бұрын
Wow great video subscribed it instantly 😍.
@FlorinPop
@FlorinPop 4 жыл бұрын
Thank you 🙏
@RAHULROY-sb9nt
@RAHULROY-sb9nt 2 жыл бұрын
I am from india..i had problem with foreign accents.but yours fine and clear.
@darwinmelendres5469
@darwinmelendres5469 2 жыл бұрын
Thank you sir Florin. Do you have any tutorial on how to connect the data to the database?
@robertmarsman2055
@robertmarsman2055 3 жыл бұрын
Hi Florin. I was wondering how to have a + or - option at the end of a field to recreate the field multiple times. i hope that i am clear enough to understand. Thank you
@cautarepvp2079
@cautarepvp2079 3 жыл бұрын
this is the first video i see on your channel and is fcking amazing dude, bravo! By your name you must be Romanian :D btw you work in this industry? I heard lots of opportunities in Cluj and brasov for javascript devs, any suggestion on how to start a career in software development?
10 Form Validation Tips Every Web Developer SHOULD KNOW!
9:22
James Q Quick
Рет қаралды 13 М.
Learn DOM Manipulation In 18 Minutes
18:37
Web Dev Simplified
Рет қаралды 1 МЛН
Haha😂 Power💪 #trending #funny #viral #shorts
00:18
Reaction Station TV
Рет қаралды 13 МЛН
🌊Насколько Глубокий Океан ? #shorts
00:42
MEU IRMÃO FICOU FAMOSO
00:52
Matheus Kriwat
Рет қаралды 28 МЛН
Watermelon Cat?! 🙀 #cat #cute #kitten
00:56
Stocat
Рет қаралды 53 МЛН
10 JavaScript Projects in 1 Hour - Coding Challenge 🔥
1:01:11
Florin Pop
Рет қаралды 265 М.
JavaScript Form Validation For Beginners
16:37
Web Tech Knowledge
Рет қаралды 19 М.
BEST Ways to Handle and Validate React Forms without a Library
42:38
Form validation using Javascript on the client side for beginners
9:35
JavaScript Academy
Рет қаралды 368 М.
Learn HTML Forms In 25 Minutes
24:56
Web Dev Simplified
Рет қаралды 953 М.
All Rust string types explained
22:13
Let's Get Rusty
Рет қаралды 150 М.
The BEST way to do form validation in JavaScript
59:45
Code With Bubb
Рет қаралды 17 М.
Секретный смартфон Apple без камеры для работы на АЭС
0:22
Какой ПК нужен для Escape From Tarkov?
0:48
CompShop Shorts
Рет қаралды 265 М.
Собери ПК и Получи 10,000₽
1:00
build monsters
Рет қаралды 1 МЛН
APPLE совершила РЕВОЛЮЦИЮ!
0:39
ÉЖИ АКСЁНОВ
Рет қаралды 3,7 МЛН