JavaScript Form Validation
VloĆŸit
- Äas pĆidĂĄn 17. 06. 2019
- 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
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.
I'm glad I have been able to help!
@@WebDevSimplified make videos short like that one đ
It will help you and also great for us
can u do one for email and password
@@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!
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!!!"
Almost 15 videos and landed here only to realize how perfect this video was. Just on point.
Iâm so glad I found your channel. You explain it so well
Thank you! I'm glad you understand my teaching style.
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!
He wasn't kidding when he said he's going to simplify the web for us. Thank you soo much
XD
Just want to extend my thanks, straight to the point, proper mic and camera. Subbed :)
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!
I like that you do not waste time you get straight into it .
good luck.
This is great, I learned a lot. Thank you!!
awesome dude ! thank you ! love the logic you used.
Love how simple you made this
GOOD VIDEO. Short and to the point. Thanks for this!
I actually have always been intimidated by JS part of creating sites but you make that appear so fun . Thanks!đ
finally a simple and easy to understand javascript validation form!
thank you, I've been trying to do this for a bit.
Thanks so much mate, you make it so simple! You got my sub.
ĐŃлОŃĐœĐ°Ń ĐżĐŸĐŽĐ°ŃĐ° ĐžĐœŃĐŸŃĐŒĐ°ŃОО , бŃŃŃŃŃĐč ŃĐ”ĐŒĐż - ŃĐ°ĐŽŃĐ”Ń)
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!
Can you please do sth on regex??
Juda kotta yordam berdingiz raxmat! :)from Uzbekistan
The way you explain the code while you're coding it is AMAZING! Thanks
Thank you for the video. It was concise and understandable to a beginner.
Probably one of the best tutorials I've seen on CZcams. Too bad the algorithm doesn't recommend you enough
Thank you!
Simplicity level is on high N' The way you say "Oops"đ got me theređ€đŻ
This mad tough i can't even find the open to live server
Dude, you are a great teacher, you negate questions from your students because your explanations are so clear.
Cool! It actually works even without defining the consts in the beginning ;)
I must say you'll get in a same league with NetNinja and BradTraversy in no time if you keep it up. Awesome content.
Thank you! That is a huge compliment. I think both those teachers are amazing.
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..
he is far better than BradTraversy and just as good as NetNinja if not even better.
@@pastorfred2543 Ù€ŰŽ
You saw quite far into the future my friend
Amazing, Amazing, Amazing. Couldn't have explained it better. Keep it up.
this was actually asked during an interview for an internship.
your channel shares some really good content ....what i was looking for
Hi there! You make these concepts so understandable. I appreciate your channel so much. Please keep making these great videos... Cheers!
Thank you so much!
Awesome,you explain so easily...Thank you very much.
Will experiment other validations with your codes here as my guide. Thanks!
Only 5k views? I hope you get more man, good stuff!
Thank you! 5k is more than a lot of my videos so I am very happy with that.
Thank you this video helped me a lot .
omg this vid saved me
thank you very much!
Short with good explanation. Very nice.
Thanks!
That was really helpful, great video
Learnt Something New Today... Much Appreciated
I'm really glad I could help
learned
This was a helpful tutorial, thank you.
thanks a lot it was better than a calculator project because i understood every thinh in this video :))
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.
holy shit thanks
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
@@m.j.mcintear793 I forgot all that I learned sorry lol
@@m.j.mcintear793 I would assume you could do something like this in js:
If(email1 !== email2){
Error.value.push("emails must match")
}
Thank you so much !!! Love this channel !!!!
Hi thank you I can not get away from the channel but because of work thanks
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!!!!
Thank you very much! Short
And it's easy.đ
Once again...
Great video!!!
Thank you
this guy misspells things the exact same way as me, i feel at home
very helpful video, thanks a lot, good job!
Simply Superb ... Kept cmplx things easier
such an amazing and concise video
All I wanted in a single video.
Straight to the point.....
Very helpful. Thank you.
Simple and clearđ„đ„đ„đ„đ„đ„đ„
You are incredible manđ
Thanks a lot for this tutorial
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
My Guy, The Way you structured that Code, You're smart!!!
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.
Thank you so much man!
SO COOL!!!!I LEARNED A LOT
Awesome! Thank you!!
thanks a lot really helped me !
Bro thank you so much im working on a website and all the other ones are indian language thanks for speaking English.
Awesome video, good content and nice explanations. Do you have a JavaScript series video
Awesome video, would be good to go through some of the HTML5 validation that comes built into most browsers
Thanks for this
nice work and great simply explained it
Awesome, many thanks
thanks, it help me a lot
Thanks for using vanilla JavaScript !!
You're welcome! I generally use vanilla JS in all my tutorials when possible. I only reach for a library if it really saves me time.
So helpful man, thank you C:
Thank you ,You Saved me...
Awesome explanation
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.
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 !!!
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.
@@WebDevSimplified Great, well, I'll check out your channel to watch that video. Thanks again .
Really important video
good job!! thanks!!
super helpful video thanks
dude, you are the fucking GOAT explaining this shit, keep it uppppppppppppp
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!
Thanks for the help
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
Please make a video on form validation both on keyup and after clicking submit on one video pls
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 czcams.com/video/zbH-6r2QjP4/video.html
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.
FANTASTIC!
This is what I'm looking for. Thank you !
Thank you for your quick and easily understandable content. I'd like to know how I would check the validation of an email address. For example, if they accidentally forget the '@'. How would I go about that?
ik it's late for you but for others:
if (!email.value.match(/.*?@.*?\.*/)) {
messages.push("Enter the correct format for the e-mail");
}
It's a very, very, very basic e-mail regex, you can look up more complex and more specific ones online.
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..??
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?
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."
Thank you so much đ„°
Easy to understand
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?
nice explanation bro
Thanks!
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 :(
simplicity:100
Hello brother pls Help me
How can we add admit card download features or certificate verification features pls help
Me..
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?