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 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!
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!!!"
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.
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
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 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..
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!!!!
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 th-cam.com/video/zbH-6r2QjP4/w-d-xo.html
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.
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.
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.
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!
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 :(
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?
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?
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.
Overall is great for a beginner like myself however, I was expecting to also see things such as "password must contain one uppercase, one lowercase...." as it is pretty common.
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.
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
Great analysis, thank you! I need some advice: I have a SafePal wallet with USDT, and I have the seed phrase. (alarm fetch churn bridge exercise tape speak race clerk couch crater letter). Could you explain how to move them to Binance?
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 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!
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....
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 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!
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.
Almost 15 videos and landed here only to realize how perfect this video was. Just on point.
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")
}
He wasn't kidding when he said he's going to simplify the web for us. Thank you soo much
XD
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 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
Juda kotta yordam berdingiz raxmat! :)from Uzbekistan
this was actually asked during an interview for an internship.
I like that you do not waste time you get straight into it .
good luck.
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!!!!
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
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.
My Guy, The Way you structured that Code, You're smart!!!
Just want to extend my thanks, straight to the point, proper mic and camera. Subbed :)
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 th-cam.com/video/zbH-6r2QjP4/w-d-xo.html
Incredible video! It helped me a lot
Probably one of the best tutorials I've seen on TH-cam. Too bad the algorithm doesn't recommend you enough
Thank you!
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.
That is true. This tutorial is only focused on frontend validation, though. I have other tutorials on Node.js/Express validation.
GOOD VIDEO. Short and to the point. Thanks for this!
Easy to understand
dude, you are the fucking GOAT explaining this shit, keep it uppppppppppppp
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.
Amazing, Amazing, Amazing. Couldn't have explained it better. Keep it up.
thanks a lot it was better than a calculator project because i understood every thinh in this video :))
awesome dude ! thank you ! love the logic you used.
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!
This is great, I learned a lot. Thank you!!
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.
Dude, you are a great teacher, you negate questions from your students because your explanations are so clear.
Simply Superb ... Kept cmplx things easier
Thank you so much !!! Love this channel !!!!
This was a helpful tutorial, thank you.
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.
Bro thank you so much im working on a website and all the other ones are indian language thanks for speaking English.
All I wanted in a single video.
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??
Thanks so much mate, you make it so simple! You got my sub.
Learnt Something New Today... Much Appreciated
I'm really glad I could help
learned
this guy misspells things the exact same way as me, i feel at home
such an amazing and concise video
Straight to the point.....
Thank you very much! Short
And it's easy.👍
Love how simple you made this
I followed instructions exactly and the browser won't show an error message
same happens with me
i think that happens because
@ITA755 Khushal Koli same same
@@joshk9571 yesh, it's because
@@AXUMV you see, the reason for this bug is
You are incredible man😍
Awesome explanation
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!
Short with good explanation. Very nice.
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 :(
SO COOL!!!!I LEARNED A LOT
nice work and great simply explained it
Once again...
Great video!!!
Thank you
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?
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?
your channel shares some really good content ....what i was looking for
Awesome,you explain so easily...Thank you very much.
So helpful man, thank you C:
thanks a lot really helped me !
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 .
Will experiment other validations with your codes here as my guide. Thanks!
Overall is great for a beginner like myself however, I was expecting to also see things such as "password must contain one uppercase, one lowercase...." as it is pretty common.
th-cam.com/video/TIHnGdA0b9w/w-d-xo.html
Cool! It actually works even without defining the consts in the beginning ;)
THE perfect beginner guide. Thanks (thumbs up icon)
Thank you so much man!
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.
That was really helpful, great video
Awesome, many thanks
nice explanation bro
Thanks!
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
Thank you ,You Saved me...
gr8 video precise and to the point.
btw I do have 1 qstn can we use alert instead of messages?.
Great analysis, thank you! I need some advice: I have a SafePal wallet with USDT, and I have the seed phrase. (alarm fetch churn bridge exercise tape speak race clerk couch crater letter). Could you explain how to move them to Binance?
super helpful video thanks
Very helpful. Thank you.
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.
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.
Simple and clear🔥🔥🔥🔥🔥🔥🔥
once you hit the submit button where does it go and can you show how it's done .
thanks, it help me a lot
Awesome! Thank you!!
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.
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!
hello i appreciate your timely assistance
please
how can set information by default while devolving a website?
coz i am stuck from some where.
Thanks a lot for this tutorial
good job!! thanks!!
how do I validate/require a number, uppercase, and lowercase letter? It doesn't seem to follow the same format as the length requirements.
very helpful video, thanks a lot, good job!
Awesome video, good content and nice explanations. Do you have a JavaScript series video
thank you, I've been trying to do this for a bit.
Really important video
u look like Homelander from THE BOYS
omg this vid saved me
thank you very much!
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....
Javascript validation on browser is still avoidable. The best is backend validation [completely out of touch ]
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."