JavaScript Form Validation

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/Web...
🧠 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/Web...
CodePen: codepen.io/Web...
#FormValidation #WDS #JavaScript

[@rkeenan85]

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]

I'm glad I have been able to help!

[@hamzailyas7617]

@@WebDevSimplified make videos short like that one 👍 It will help you and also great for us

[@el-jivacarter552]

can u do one for email and password

[@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!

[@jalen.austin]

Thanks for this

[@Victor_Marius]

Do you really need type=button for a button element? I think it submits the form even with just Submit or, a more correct way,

[@saikumardasari4220]

how we can use feildset with legend tag in react with one example

[@sherryvlogs2009]

u look like Homelander from THE BOYS

[@TR1XT3RZ360]

Followed this step by and step and its not working!!

[@pappucdl]

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!!!"

[@mykolamysko987]

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]

Thank you! That is a huge compliment. I think both those teachers are amazing.

[@pastorfred2543]

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]

he is far better than BradTraversy and just as good as NetNinja if not even better.

[@gon_9062]

@@pastorfred2543 ٤ش

[@susmitislam1910]

You saw quite far into the future my friend

[@westfield90]

I’m so glad I found your channel. You explain it so well

[@WebDevSimplified]

Thank you! I'm glad you understand my teaching style.

[@vaidehikawal4117]

Simplicity level is on high N' The way you say "Oops"😍 got me there🤟💯

[@sunsetsleeper]

This mad tough i can't even find the open to live server

[@rayanjlidi2220]

He wasn't kidding when he said he's going to simplify the web for us. Thank you soo much

[@bluwhale9004]

XD

[@pushpakgupta7396]

simplicity:100

[@leodragonheart754]

dude, it doesnt work... I have no idea why... I dont get any text saying name required.

[@slmshady539]

this was actually asked during an interview for an internship.

[@integrateeverything]

Please make a video on form validation both on keyup and after clicking submit on one video pls

[@ConsulthinkProgrammer]

There are several alternatives for making form application. For an example we could use Appsheet, but Appsheet has a limit of only 10 accounts for the free version. For another alternatives, we could use google apps script for more flexible customization and so we could add pretty good functions such as geolocation, upload files or qrcode and barcode scanner too. One of the references about login form with slider animation is kzbin.info/www/bejne/sJOrXmmoZ7adhpY

[@robertefremov9380]

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?

[@calumbarratt2174]

Anyone else not able to get this to work following this exactly..?

[@nickpapadopoulos7466]

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!

[@erichernandez8379]

I followed instructions exactly and the browser won't show an error message

[@ita755khushalkoli2]

same happens with me

[@joshk9571]

i think that happens because

[@krakatoom]

@ITA755 Khushal Koli same same

[@AXUMV]

@@joshk9571 yesh, it's because

[@coltonaallen]

@@AXUMV you see, the reason for this bug is

[@pulga961]

mdn docs tell us to not relay on html form validation because it can be avoided somehow....on the other hand your javascript implementation is not accessible at all...we should programaticaly move focus to error element or give it attribute role="alert" or smth like that....

[@hanesmitter1469]

Javascript validation on browser is still avoidable. The best is backend validation [completely out of touch ]

[@steveotieno8441]

My Guy, The Way you structured that Code, You're smart!!!

[@samarmohan9891]

When I used var instead of const, it didn't work. Keep that in mind if you are reading this

[@consoledoterror971]

All I wanted in a single video.

[@GamingIsFunHUN]

The exact copy of this code doesn't work wtf.

[@ReyBanYAHUAH]

Always remember we must repent of our sins (sin is transgression The Law Of Yahuah The Father in Heaven. The Law are The Books: Genesis, Exodus, Leviticus, Numbers, & Deuteronomy). We must repent of our sins and Have Belief On Yahusha The Messiah. HE Died and Rose three days later so that we can be forgiven of our sins! Come to HIM🙂🙂🙂🙂🙂🙂🙂🙂

[@haritechsolutions5365]

How to edit read only web page in Google chrome without getting manipulate error while submitting

[@luisgustavo.5449]

Nice video! But guys, please DON'T LIMIT THE PASSOWRD CHARACTERS to just 20 chars, othewise the hackers would be so grateful to you...

[@user13rs258]

So this validation we are applying through Javascript is known as server side validation? Or just front-end validation?? Because in the html it's doesn't shows up so it shouldn't be front-end validation right it must be server side? 😅😅😅 And if we did validation in the back-end that will also be known as Server side validation right??? Please help me clear my doubt.. Thanks!

[@coding_with_mayavi0]

Bro iam used for prevent form but is showing uncaught typeError :cannot read properties of undifned(reading'addEventListner') At (line) what happent

[@subliminakeys1674]

Okay I've watched tons of your videos... How do you copy and paste so fast? You are definitely not using the keyboard. It seems like you are just dbl clicking or something...

[@victorsvensson7914]

The more than and less than conerning the amount of charcters can be done in html. You do not need Javascript for that. If someone does not have Javascript enabled, then your validation will fail. That is not good WCAG practice. 😛

[@vaishnavimithapalli9071]

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!!!!

[@pawansubedi8544]

if(name.value ==null) i have does this excluding (names.value====" ") but it doesnot work..whats the problem any solution

[@dunialebowski8320]

hello, is anyone having issues when typing name.value in their editor? I'm using Visual Studio code and whenever I write this, it has a strikethrough and this explanation "The declaration was marked as deprecated here."

[@paulpancake]

Thank you for the tutorial. But how do I enable the default again, after giving a false password once and the correcting it? It keeps showing the error message :(

[@drekforder2952]

ReferenceError: Cannot acces 'error' before initialization what do I do with that? It's refreshing the page uven if I put the button blocking outside of if function

[@ssenkoomianthony6006]

hello i appreciate your timely assistance please how can set information by default while devolving a website? coz i am stuck from some where.

[@xxapoloxx]

How do you addapt Forms to work well with SPAs and Ajax? they seem like legacy code from the 90s

[@alexauga]

I replicated this in VS Code and when I click Submit it takes me to my C:/ drive directory, not sure what I'm doing wrong?

[@y.l.deepak5107]

hello sir im learning u r stuff in channel from quite while sir i would like to ask i have a project on lab maintenance system using php and mysql idk how to do about that project sir i hope u could u pls help me sir

[@jushwanth.g.v8298]

whn i click on submit nothing happens when i checked the debugger it says ReferenceError: document is not defined.

[@MUHAMMADZEESHAN-tp7zy]

what the fuck... if u already use "required" in input field then u don't need to implement javascript code.

[@swastikjainsj]

aree i want real time Message eg like i am typing number but the input forn validation is from Alphabets it to show live

[@johnatteo822]

Bro you didn't even teach us the best part?? How to set the username and passwords and how to go to the next page after submitting...

[@RockiBY]

How can I check for a already existing (phone number/ nickname/ email) when filling in a field with?

[@gibsgibus]

awesome dude ! thank you ! love the logic you used.

[@timtech9361]

This is a basic form validation for 3 year olds. What if there are multiple fields to fill out (more than 5). This method is not efficient then.

[@aaryanbhurtel8577]

can you make a video how to make a blog with free domain and hosting and ya website should be from js please...

[@kirinkappa5662]

.tutorial { simplicity: 100%; usefulness: 100%; viewer-time-investment: none; } youtuber.subscribers++;

[@ojomudamola6674]

But if I want the input.value to show the after being successful? . Pls I really need this

[@m.j.mcintear793]

how to call the function with each of these variables as an argument emailaddress variable and emailconfirm variables

[@palmwaytech]

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?

[@olamideolajuyi2311]

Easy to understand

[@xilongzhang6856]

The code does not work for me. then I downloaded the code from your codepen but it’s not working as well :(

[@jstdarwn]

u didn't even use else statement.... hows that? can anyone please explain what kind of assignment is this?

[@juniorpirela6885]

Is secure do this validations only with javascript?? anyone can inject malicious code I think

[@sherryvlogs2009]

He wasn't kidding when he said he's going to simplify the web for us. Thank you soo much

[@MultiMunja]

You are great. You make sshort videos and I love them. Just speak little bit slower because most of us is learning and if Your video is one minute longer it would be better :D. But that is just my opinion. But You are still great

[@alphaomegaalines5935]

this video is outdated, when i press submit i see my entire directory tree at 4:29 at the same time, i cannot find the github repository for this video

[@foxjonesofficial]

Only 4k likes? 😢

[@RockyKev]

using the -- the required part is only front-end validation. You should also do back-end validation. For proof - visit a form with a "required" attribute, visit devtools, edit HTML, and remove "required". If you can still submit it, then the site didn't do proper back-end validation and you can break their site.

[@WebDevSimplified]

That is true. This tutorial is only focused on frontend validation, though. I have other tutorials on Node.js/Express validation.

[@tkchamp5120]

this guy misspells things the exact same way as me, i feel at home

[@luzbritez7547]

i can't belive how attractive you are, thanks for the video btw it helped me

[@WebDevSimplified]

Thanks. I'm really glad you enjoyed the video and found it helpful.

[@brunosgaming9574]

bro the thumbnail is out of this video, i needed the correct video thats shown in thumbnail :(

[@5Pectral]

This is a very slick and simple tutorial. However I would be weary of claiming to "cover all concepts" of validation as you only used one of the many input types HTML provides. Also, you began by creating an event listener to prevent its default behavior but then continued to use it to validate input and push error messages. Ideally these should be their own functions, but I get that you may have consolidated them for the sake of the tutorial. It's just that your viewers are going to pick up the habits they see, and unless you say otherwise they might start writing doEverything() functions :P Allinall this tutorial definitely hit the mark, and whats more, they'll only get better!

[@WebDevSimplified]

Thank you for the feedback. I can definitely see the desire for a separate function that builds the error messages which is called from the event listener to clean up the code. I feel for this example though since it was so small it probably isn't worth it especially since it can add extra complexity to the tutorial.

[@MR2U2B]

Thou lackest one point: checking availability of a username.

[@gravitashebynimus3425]

the .innerText for some reason dosn't work for me, it's not included in the dropdown selection when doing erroeElement.innerText = messages.join(', ');

[@diddlenfiddle7311]

Only 5k views? I hope you get more man, good stuff!

[@WebDevSimplified]

Thank you! 5k is more than a lot of my videos so I am very happy with that.

[@worldoflanguages1043]

what is the difference between null and "" in input, why did you use 2 conditions not one?

[@aya2222]

He reminds me of the main character guy from the movie Social network.

[@Rygoken]

Loved the vid but for some reason, my validations are not going through.

[@dnjosh10]

Your explanation was very okay and understanding but you speak too fast

[@17Kalash]

I don't get the use of defer inside the script where we connect the js in the head of the html

[@cineymatic]

Almost 15 videos and landed here only to realize how perfect this video was. Just on point.

[@pheapsochetra1357]

can you show me how to create password and confirm password in form validation ??

[@DavisTibbz]

Let “cpassword” be confirm password field variable If(password.value === cpassword.value) { //display your error. }

[@BGWFILMSTUDIOS]

once you hit the submit button where does it go and can you show how it's done .

[@EnglishBasicsGrammars]

I want to learn js from basics to advance... please share sm pdf..

[@None-0n3]

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!

[@imjaystationbest2]

Bro thank you so much im working on a website and all the other ones are indian language thanks for speaking English.

[@rishengopaldass1103]

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!

[@WeeboPlatform]

How to get an alert message for incorrect username or password?

[@victorsvensson7914]

Why are you not using

[@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]

holy shit thanks

[@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]

@@m.j.mcintear793 I forgot all that I learned sorry lol

[@dracophobic3381]

@@m.j.mcintear793 I would assume you could do something like this in js: If(email1 !== email2){ Error.value.push("emails must match") }

[@nbvdib2098]

very good but you speak too fast ahah sry im French

[@matiashillmann1278]

This is great, I learned a lot. Thank you!!

[@chiranjeevimeti8969]

WHY R U NOT ZOOMING THE SCREEN WHILE CODING

[@geraldakabike2026]

Learnt Something New Today... Much Appreciated

[@WebDevSimplified]

I'm really glad I could help

[@mi5956]

learned

[@digihz_data]

Nice,but....please speak a bit slower. Getting stressed hearing you rush things.

[@SRG-Learn-Code]

You can change playback speed or rewind, also I recommend to enable closed captions.

[@samannoyb]

Yeah, but "required" is also an option!

[@TheMaster201989]

nice work and great simply explained it

[@dailymeow3283]

Is there a way i can sanitize the input against XSS, to check each name.value character if equals to something like \>|\

[@ocean.w.a.v.e.s]

hey do you have a contact form submit video??

[@arcanepersona1676]

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 ..

[@LJ-tb4om]

how do I validate/require a number, uppercase, and lowercase letter? It doesn't seem to follow the same format as the length requirements.

[@ShubhAgarwal__]

Hey i am having the following error. Plz Help Me Uncaught ReferenceError: messages is not defined at Test7.html:20

[@messironaldo1708]

Can someone explain to me what the (e) is for @3:14?

[@TomasMisura]

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.

[@sumanroshan2873]

you look like taylor lautner in the movie twilight

[@randy4443]

preventdefault doesn't work with post

[@shahulya7654]

/ gives me all the files in my computer when I click on the button🤷🏻‍♀️

[@ameyjangam2485]

Hey, were you able to solve the issue?