JavaScript Form Validation

  Рет қаралды 877,884

Web Dev Simplified

Web Dev Simplified

5 жыл бұрын

Form validation is one of the most common web development tasks. There are many ways to do form validation, but JavaScript is one of the best and easiest ways to write form validation. In this video I will be covering all of the concepts of form validation in JavaScript as well as how to display helpful error messages to the user. By the end of this video you will have all the tools you need to implement form validation in your own projects.
📚 Materials/References:
HTML Forms Explained: • Learn HTML Forms In 25...
CodePen Code: codepen.io/WebDevSimplified/p...
🧠 Concepts Covered:
- Preventing form submission in JavaScript
- Using HTML attributes to validate input elements
- Displaying form validation messages to the user
- How to check for form errors
🌎 Find Me Here:
Twitter: / devsimplified
Discord: / discord
GitHub: github.com/WebDevSimplified
CodePen: codepen.io/WebDevSimplified
#FormValidation #WDS #JavaScript

Пікірлер: 369
@pappucdl
@pappucdl 4 жыл бұрын
What I greatly like about your video is, they are concise and to the point. Also you solve problem in a single video which is excellent. Keep up the "Awesome Work!!!"
@nickpapadopoulos7466
@nickpapadopoulos7466 3 жыл бұрын
Turns out all I needed was "required", but this was far more valuable than I anticipated. I can find many uses where you prevent the form from being submitted in the future. This video is dense in information, on point explanations without any second wasted. Thank you!
@rkeenan85
@rkeenan85 3 жыл бұрын
Thank you for making these so short. I just need a basic idea of how this works. I have not done validation in awhile, and I was so stuck at work. This saved my life. I will definitely have to pick up your courses. You have saved me twice now.
@WebDevSimplified
@WebDevSimplified 3 жыл бұрын
I'm glad I have been able to help!
@hamzailyas7617
@hamzailyas7617 2 жыл бұрын
@@WebDevSimplified make videos short like that one 👍 It will help you and also great for us
@el-jivacarter552
@el-jivacarter552 Жыл бұрын
can u do one for email and password
@krakatoom
@krakatoom Жыл бұрын
@@WebDevSimplified thanx for the clip. but my brwoser doesnt get back the error message. cant say why. and as for the use of name in js it say something about depracated. can u help me out!
@preethamcs77
@preethamcs77 3 жыл бұрын
Almost 15 videos and landed here only to realize how perfect this video was. Just on point.
@rogerrock12games
@rogerrock12games Жыл бұрын
I appreciate these courses. I tried your way and it didn't work, but at this point with all the learning I've begun to absorb, I was able to make a better validator using regular expressions, which while I'm having a really hard time with them, are very fun and useful if you know how to apply those concepts!
@TertiusRoach
@TertiusRoach 4 жыл бұрын
Just want to extend my thanks, straight to the point, proper mic and camera. Subbed :)
@westfield90
@westfield90 4 жыл бұрын
I’m so glad I found your channel. You explain it so well
@WebDevSimplified
@WebDevSimplified 4 жыл бұрын
Thank you! I'm glad you understand my teaching style.
@destrayo3049
@destrayo3049 2 жыл бұрын
I like that you do not waste time you get straight into it . good luck.
@sherryvlogs5271
@sherryvlogs5271 Жыл бұрын
He wasn't kidding when he said he's going to simplify the web for us. Thank you soo much
@lefamofokeng8291
@lefamofokeng8291 Жыл бұрын
I actually have always been intimidated by JS part of creating sites but you make that appear so fun . Thanks!😊
@patrick-dev
@patrick-dev 3 жыл бұрын
The way you explain the code while you're coding it is AMAZING! Thanks
@simonekranawetter316
@simonekranawetter316 2 жыл бұрын
Thank you for these videos. It's really simple to follow along, you have a clear way of explaining concepts and every time I try to implement them myself I have an easier time remembering because you explain it in a very easy to understand way and don't waste any time. Thank you so much for sharing!
@kirwakelvinkering3122
@kirwakelvinkering3122 Жыл бұрын
Can you please do sth on regex??
@BackspaceCadet
@BackspaceCadet 3 жыл бұрын
Love how simple you made this
@matiashillmann1278
@matiashillmann1278 4 жыл бұрын
This is great, I learned a lot. Thank you!!
@AndrewKwabula
@AndrewKwabula 4 жыл бұрын
Dude, you are a great teacher, you negate questions from your students because your explanations are so clear.
@gibsgibus
@gibsgibus 5 жыл бұрын
awesome dude ! thank you ! love the logic you used.
@webstyle876
@webstyle876 4 жыл бұрын
Отличная подача информации , быстрый темп - радует)
@eftiprwtopapadakis9310
@eftiprwtopapadakis9310 3 жыл бұрын
finally a simple and easy to understand javascript validation form!
@thetech3624
@thetech3624 3 жыл бұрын
Amazing, Amazing, Amazing. Couldn't have explained it better. Keep it up.
@awaisn
@awaisn 4 жыл бұрын
GOOD VIDEO. Short and to the point. Thanks for this!
@joshkoster2851
@joshkoster2851 3 жыл бұрын
Thanks so much mate, you make it so simple! You got my sub.
@joashemmanuel288
@joashemmanuel288 3 жыл бұрын
Thank you for the video. It was concise and understandable to a beginner.
@bagel389
@bagel389 3 жыл бұрын
thank you, I've been trying to do this for a bit.
@uttampaul2467
@uttampaul2467 4 жыл бұрын
Awesome,you explain so easily...Thank you very much.
@vaidehikawal4117
@vaidehikawal4117 3 жыл бұрын
Simplicity level is on high N' The way you say "Oops"😍 got me there🤟💯
@sunsetsleeper
@sunsetsleeper 2 жыл бұрын
This mad tough i can't even find the open to live server
@hiwayshoes
@hiwayshoes 5 жыл бұрын
Hi there! You make these concepts so understandable. I appreciate your channel so much. Please keep making these great videos... Cheers!
@WebDevSimplified
@WebDevSimplified 5 жыл бұрын
Thank you so much!
@slmshady539
@slmshady539 3 жыл бұрын
this was actually asked during an interview for an internship.
@makelovenotwar9941
@makelovenotwar9941 3 жыл бұрын
Will experiment other validations with your codes here as my guide. Thanks!
@timowiedmer2991
@timowiedmer2991 2 жыл бұрын
Cool! It actually works even without defining the consts in the beginning ;)
@vaishnavimithapalli9071
@vaishnavimithapalli9071 3 жыл бұрын
i saw this video 2 times coz 1st i was just staring at him coz he is ssoooooooooo handsome and 2nd time..........dude you literally made it simple to understand. Thankyou soo soo much!!!!
@ajayshankhwar730
@ajayshankhwar730 3 жыл бұрын
your channel shares some really good content ....what i was looking for
@mykolamysko987
@mykolamysko987 5 жыл бұрын
I must say you'll get in a same league with NetNinja and BradTraversy in no time if you keep it up. Awesome content.
@WebDevSimplified
@WebDevSimplified 5 жыл бұрын
Thank you! That is a huge compliment. I think both those teachers are amazing.
@pastorfred2543
@pastorfred2543 4 жыл бұрын
I discovered him not long ago and he's really amazing I must confess.. I followed his tutorials concerning async await and I was able to apply it in my current inventory project..
@jackfrost8969
@jackfrost8969 3 жыл бұрын
he is far better than BradTraversy and just as good as NetNinja if not even better.
@gon_9062
@gon_9062 3 жыл бұрын
@@pastorfred2543 ٤ش
@susmitislam1910
@susmitislam1910 3 жыл бұрын
You saw quite far into the future my friend
@wahabrehman6848
@wahabrehman6848 4 жыл бұрын
Probably one of the best tutorials I've seen on KZfaq. Too bad the algorithm doesn't recommend you enough
@WebDevSimplified
@WebDevSimplified 4 жыл бұрын
Thank you!
@timurfayziyev1647
@timurfayziyev1647 3 жыл бұрын
Juda kotta yordam berdingiz raxmat! :)from Uzbekistan
@mohamedelyeszormati
@mohamedelyeszormati Жыл бұрын
This was a helpful tutorial, thank you.
@degsewtegegne
@degsewtegegne Жыл бұрын
Thank you very much! Short And it's easy.👍
@diogostein848
@diogostein848 Жыл бұрын
This helped me a lot. I was adding an event listener to the submit button, not the form. So the validation wasn't working. Thanks for the tutorial.
@devoided2
@devoided2 4 жыл бұрын
omg this vid saved me thank you very much!
@jayamali1422
@jayamali1422 Жыл бұрын
Thank you this video helped me a lot .
@xxrartoxx
@xxrartoxx 4 жыл бұрын
That was really helpful, great video
@nurainnabila2218
@nurainnabila2218 2 жыл бұрын
Thank you so much !!! Love this channel !!!!
@geraldakabike2026
@geraldakabike2026 5 жыл бұрын
Learnt Something New Today... Much Appreciated
@WebDevSimplified
@WebDevSimplified 5 жыл бұрын
I'm really glad I could help
@mi5956
@mi5956 5 жыл бұрын
learned
@dur1m4r93
@dur1m4r93 3 жыл бұрын
very helpful video, thanks a lot, good job!
@diddlenfiddle7311
@diddlenfiddle7311 4 жыл бұрын
Only 5k views? I hope you get more man, good stuff!
@WebDevSimplified
@WebDevSimplified 4 жыл бұрын
Thank you! 5k is more than a lot of my videos so I am very happy with that.
@manueltylan827
@manueltylan827 2 жыл бұрын
Simple and clear🔥🔥🔥🔥🔥🔥🔥
@hrushikeshpatil3772
@hrushikeshpatil3772 3 жыл бұрын
Straight to the point.....
@Hirand2349_3
@Hirand2349_3 3 жыл бұрын
Simply Superb ... Kept cmplx things easier
@shadon_official2510
@shadon_official2510 2 жыл бұрын
such an amazing and concise video
@eclecticann
@eclecticann 2 жыл бұрын
hiya! thanks for this post. very helpful. question though. what happens when they fill out all the input fields? would u recommend an else statement? thanks.
@deboragetachew5677
@deboragetachew5677 2 жыл бұрын
Very helpful. Thank you.
@joakimwretlind4016
@joakimwretlind4016 4 жыл бұрын
Short with good explanation. Very nice.
@WebDevSimplified
@WebDevSimplified 4 жыл бұрын
Thanks!
@__jake.m
@__jake.m 2 жыл бұрын
Thank you so much man!
@robertefremov9380
@robertefremov9380 2 жыл бұрын
i couldn't quite get if it wipes the content in the "messages" array after the function has run, or when you run the function again it wipes the previous error messages? Or is it the event being over that wipes the content in the "messages" array?
@majidamini237
@majidamini237 2 жыл бұрын
thanks a lot it was better than a calculator project because i understood every thinh in this video :))
@oliveroshea5765
@oliveroshea5765 11 ай бұрын
Awesome, many thanks
@andrei-petrulazar5564
@andrei-petrulazar5564 2 жыл бұрын
Awesome! Thank you!!
@consoledoterror971
@consoledoterror971 4 жыл бұрын
All I wanted in a single video.
@TheMaster201989
@TheMaster201989 6 ай бұрын
nice work and great simply explained it
@htmlcssjavascriptjqueryphp5855
@htmlcssjavascriptjqueryphp5855 2 жыл бұрын
thanks a lot really helped me !
@beganarasusekar6195
@beganarasusekar6195 3 жыл бұрын
You are incredible man😍
@TheMaro57
@TheMaro57 Жыл бұрын
A note for beginners. The code runs by order so that things to work smoothly. Do not mix up the order of the If commands. Also take out the action figure inside the because that is for only when the html file is hosted on a different server.
@01suku77
@01suku77 Жыл бұрын
holy shit thanks
@m.j.mcintear793
@m.j.mcintear793 Жыл бұрын
how to call the function with each of these variables as an argument emailaddress variable and emailconfirm variables Do you know how to make two of the same emails need to match and is that client side validation or server side? Inquiry of js on html form
@TheMaro57
@TheMaro57 Жыл бұрын
@@m.j.mcintear793 I forgot all that I learned sorry lol
@dracophobic3381
@dracophobic3381 Жыл бұрын
@@m.j.mcintear793 I would assume you could do something like this in js: If(email1 !== email2){ Error.value.push("emails must match") }
@muhammedshafeeralip4178
@muhammedshafeeralip4178 Жыл бұрын
Thank you ,You Saved me...
@NNNedlog
@NNNedlog 2 жыл бұрын
Thanks a lot for this tutorial
@darccau7204
@darccau7204 2 жыл бұрын
thanks, it help me a lot
@mr.anything6882
@mr.anything6882 3 жыл бұрын
SO COOL!!!!I LEARNED A LOT
@hesamalavi9
@hesamalavi9 4 жыл бұрын
Hi, thanks very much for the video. What if you have more fields, like last name and you would like the message to come up if that field is empty too. I know I could add the required to the HTML but I was interested in getting the message using js
@trinityshelly3965
@trinityshelly3965 2 жыл бұрын
super helpful video thanks
@DaraMojibayo
@DaraMojibayo 3 жыл бұрын
Awesome video, good content and nice explanations. Do you have a JavaScript series video
@splitlang
@splitlang 5 жыл бұрын
Hi thank you I can not get away from the channel but because of work thanks
@OhOk616
@OhOk616 Жыл бұрын
Thanks for the help
@qwertykeypad789
@qwertykeypad789 5 жыл бұрын
Once again... Great video!!!
@WebDevSimplified
@WebDevSimplified 5 жыл бұрын
Thank you
@nashsmith2303
@nashsmith2303 3 жыл бұрын
Nice and simple! love it. Do you have experience with making web accessible form validation? Would love to see a slightly more in depth version focusing on form validation compliant with WCAG
@jalen.austin
@jalen.austin 4 жыл бұрын
Thanks for this
@lgiardili
@lgiardili Жыл бұрын
good job!! thanks!!
@michelecicozzi1197
@michelecicozzi1197 4 жыл бұрын
Nice content.I just have a question... but if you sanitize user inputs on client side ( for example to prevent sql injections or something similar ), is this easier to bypass using something like Burpsuite, I mean use of valid input, intercept and then inject sql injection code using burp..??
@imjaystationbest2
@imjaystationbest2 3 жыл бұрын
Bro thank you so much im working on a website and all the other ones are indian language thanks for speaking English.
@isulakshani12
@isulakshani12 2 жыл бұрын
Really important video
@921dgratias
@921dgratias 2 жыл бұрын
Question, when using .join(',') method. If you click on the submit button multiple times the same error message will also appear multiple times since they are being pushed in the array. what's the way around it?
@steveotieno8441
@steveotieno8441 2 жыл бұрын
My Guy, The Way you structured that Code, You're smart!!!
@enricoisola3955
@enricoisola3955 3 жыл бұрын
FANTASTIC!
@OutMagic
@OutMagic Жыл бұрын
So helpful man, thank you C:
@davi_singh
@davi_singh 4 жыл бұрын
Awesome video, would be good to go through some of the HTML5 validation that comes built into most browsers
@arjun-de6dr
@arjun-de6dr 2 жыл бұрын
Awesome explanation
@olamideolajuyi2311
@olamideolajuyi2311 Жыл бұрын
Easy to understand
@TomasMisura
@TomasMisura 2 жыл бұрын
this quite useful as I am trying to do ajax call using form submit event but it constantly refreshes. I know what's happening but could not avoid it. Now I get it.
@BhavinTrivedi-of4zs
@BhavinTrivedi-of4zs Жыл бұрын
Thank you so much 🥰
@salwashafrin1829
@salwashafrin1829 Жыл бұрын
Thank you ❤️
@zettabytesofknowledge8235
@zettabytesofknowledge8235 4 жыл бұрын
Oh wow you make this look so easy and I'm learning this at light speed now, thank you! So I'm getting stuck w my js not linking: "Add a paragraph after the closing form tag with a statement letting the user know the form has been reset. Apply an id to with the appropriate value that matches the appropriate JavaScript statement. " I think that means add a event listener to the reset button, if so, how? please or can I add multiple functions to a reset button? Like popup alert that its been reset and a hidden message made visible that form has been reset? IDK why in real life id need to add such redundancy, just that is what I'm interpreting the assignment says needs to happen. what I have so far, please keep in mind its my first js assignment and its erroring out: 4 10 'unhideThankYou' is defined but never used. 7 12 'hideThankYou' is defined but never used. 16 12 'myFunction' is defined but never used. "document.getElementById("lastmodified").innerHTML = document.lastModified; function unhideThankYou() { document.getElementById("thankyou").style.visibility = "visible"; } function hideThankYou() { document.getElementById("thankyou").style.visibility = "hidden"; } function myFunction() { document.getElementById("notshown").innerHTML = "Thank you for submitting the form"; } function myFunction() { // Adds the text to the heading tag. document.getElementById("h2").innerHTML="The form has been turned in. Thank you!"; document.getElementById("submitbutton3").innerHTML="Thank you the form has been submitted"; } " ""On the reset button, add the onclick attribute with a function name of your choosing for your reset message as the value. On the submit button, add the onclick attribute with a function name of your choosing for the form submission message as the value."
@xxapoloxx
@xxapoloxx 6 ай бұрын
How do you addapt Forms to work well with SPAs and Ajax? they seem like legacy code from the 90s
@rishengopaldass1103
@rishengopaldass1103 3 жыл бұрын
Hi there. Thank you for the video. Was great! Although I noticed that validating input types wasn't included. For example. What if the user entered a number in the Name field. Please can you help with 'Validation Types', across fields, so to speak. It would be a useful extension to this video. I've been trying for so long but cannot get it right. This may help others as well. Most grateful!
@motorazr777
@motorazr777 5 жыл бұрын
Hi buddy , all your videos are amazing, thanxs so much for doing this type of content. Would you mind if you might do a video about best practices of coding? Things as, which resources to study, and a Top languages to learn as a beginner. Thanxs a lot again !!!
@WebDevSimplified
@WebDevSimplified 5 жыл бұрын
Thanks. I try to point out best practices in all of my project based videos when I come across them. I also have a few videos on how to study and best resources. They are in the top 10 and discussion playlists on my channel.
@motorazr777
@motorazr777 5 жыл бұрын
@@WebDevSimplified Great, well, I'll check out your channel to watch that video. Thanks again .
@nickwoodward819
@nickwoodward819 2 жыл бұрын
Great vid. Out of interest, if you've validation server side too I assume you don't bother returning the errors to the client then? Just rely on the fact that the front end validation is the same as the back end?
@tkchamp5120
@tkchamp5120 3 жыл бұрын
this guy misspells things the exact same way as me, i feel at home
@Nickdacooldude
@Nickdacooldude 4 жыл бұрын
Thanks man
@LJ-tb4om
@LJ-tb4om 4 ай бұрын
how do I validate/require a number, uppercase, and lowercase letter? It doesn't seem to follow the same format as the length requirements.
@shiviff5034
@shiviff5034 22 күн бұрын
Thanku very much
@mr.RAND5584
@mr.RAND5584 3 жыл бұрын
Can i combine it with reactjs? I dont like formik or final form librabry. I just want easy to understand code.
@ssenkoomianthony6006
@ssenkoomianthony6006 10 ай бұрын
hello i appreciate your timely assistance please how can set information by default while devolving a website? coz i am stuck from some where.
@qqwertyzzxcvb1921
@qqwertyzzxcvb1921 Жыл бұрын
On a website , im trying to get some form of a contact form for clients to use , they enter some simple information and it goes to a web hosting place , i log in and see the messages or it can go to my gmail. Any ideas?
@arcanepersona1676
@arcanepersona1676 2 жыл бұрын
Hi Kyle, i rewatched the video a couple of times but i couldn't get pass one issue which is my error message doesn't disappear even after i wrote the input correctly, i get all error messages stacked on my sign up window ..
Learn DOM Manipulation In 18 Minutes
18:37
Web Dev Simplified
Рет қаралды 1 МЛН
WHY DOES SHE HAVE A REWARD? #youtubecreatorawards
00:41
Levsob
Рет қаралды 33 МЛН
Когда на улице Маябрь 😈 #марьяна #шортс
00:17
#26 Form Validations in JavaScript
12:25
Telusko
Рет қаралды 496 М.
10 Tailwind Classes I Wish I Knew Earlier
13:31
Web Dev Simplified
Рет қаралды 157 М.
10 Form Validation Tips Every Web Developer SHOULD KNOW!
9:22
James Q Quick
Рет қаралды 12 М.
Learn JSON in 10 Minutes
12:00
Web Dev Simplified
Рет қаралды 3,1 МЛН
JavaScript Client-side Form Validation
29:07
Florin Pop
Рет қаралды 707 М.
Learn HTML Forms In 25 Minutes
24:56
Web Dev Simplified
Рет қаралды 948 М.
Learn JavaScript DOM Traversal In 15 Minutes
14:44
Web Dev Simplified
Рет қаралды 219 М.
JavaScript Form Validation For Beginners
16:37
Web Tech Knowledge
Рет қаралды 16 М.
How This Test Saved Kent’s Site
7:04
Web Dev Simplified
Рет қаралды 67 М.
5 JavaScript Concepts You HAVE TO KNOW
9:38
James Q Quick
Рет қаралды 1,4 МЛН
WHY DOES SHE HAVE A REWARD? #youtubecreatorawards
00:41
Levsob
Рет қаралды 33 МЛН