JavaScript Form Validation
HTML-код
- Опубликовано: 17 июн 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
![PIECE BY PIECE - Official Trailer [HD] - Only In Theaters October 11](http://i.ytimg.com/vi/7Bc6trBc1kc/mqdefault.jpg)
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!
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!
Almost 15 videos and landed here only to realize how perfect this video was. Just on point.
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!!!"
I’m so glad I found your channel. You explain it so well
Thank you! I'm glad you understand my teaching style.
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!
He wasn't kidding when he said he's going to simplify the web for us. Thank you soo much
Just want to extend my thanks, straight to the point, proper mic and camera. Subbed :)
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.
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
Love how simple you made this
finally a simple and easy to understand javascript validation form!
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!😊
Juda kotta yordam berdingiz raxmat! :)from Uzbekistan
Amazing, Amazing, Amazing. Couldn't have explained it better. Keep it up.
Thanks so much mate, you make it so simple! You got my sub.
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 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??
omg this vid saved me
thank you very much!
thank you, I've been trying to do this for a bit.
this was actually asked during an interview for an internship.
Dude, you are a great teacher, you negate questions from your students because your explanations are so clear.
Probably one of the best tutorials I've seen on RUclips. Too bad the algorithm doesn't recommend you enough
Thank you!
The way you explain the code while you're coding it is AMAZING! Thanks
Cool! It actually works even without defining the consts in the beginning ;)
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.
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!
Thank you for the video. It was concise and understandable to a beginner.
That was really helpful, great video
Learnt Something New Today... Much Appreciated
I'm really glad I could help
learned
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
Awesome,you explain so easily...Thank you very much.
your channel shares some really good content ....what i was looking for
Will experiment other validations with your codes here as my guide. Thanks!
Once again...
Great video!!!
Thank you
Thank you this video helped me a lot .
Short with good explanation. Very nice.
Thanks!
Thank you so much !!! Love this channel !!!!
This was a helpful tutorial, thank you.
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.
You are incredible man😍
very helpful video, thanks a lot, good job!
Thank you very much! Short
And it's easy.👍
Awesome! Thank you!!
Simple and clear🔥🔥🔥🔥🔥🔥🔥
Thanks for this
All I wanted in a single video.
such an amazing and concise video
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
Very helpful. Thank you.
So helpful man, thank you C:
SO COOL!!!!I LEARNED A LOT
Straight to the point.....
Simply Superb ... Kept cmplx things easier
Awesome video, good content and nice explanations. Do you have a JavaScript series video
thanks a lot it was better than a calculator project because i understood every thinh in this video :))
Hi thank you I can not get away from the channel but because of work thanks
Thanks a lot for this tutorial
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?
Thank you so much man!
this guy misspells things the exact same way as me, i feel at home
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.
FANTASTIC!
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?
Awesome, many thanks
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!
good job!! thanks!!
Awesome explanation
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")
}
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.
thanks a lot really helped 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?
Bro thank you so much im working on a website and all the other ones are indian language thanks for speaking English.
Really important video
Thank you ,You Saved me...
Awesome video, would be good to go through some of the HTML5 validation that comes built into most browsers
thanks, it help me a lot
Thanks for the help
My Guy, The Way you structured that Code, You're smart!!!
nice work and great simply explained it
super helpful video thanks
Thank you so much 🥰
Thanks man
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
gr8 video precise and to the point.
btw I do have 1 qstn can we use alert instead of messages?.
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 :(
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 .
How do you addapt Forms to work well with SPAs and Ajax? they seem like legacy code from the 90s
Can i combine it with reactjs? I dont like formik or final form librabry. I just want easy to understand code.
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.
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 ❤️
nice explanation bro
Thanks!
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!
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.
I’ll never fail IT🥰