@@FlorinPop correct me if I’m wrong but the html email check is the same thing as the regex check right? Its just checking for an @ domain. So a@a.c will still work even with the custom function
great video Florin! Just found amazing CSS shortcuts: m0 -> margin: 0; p0 -> padding: 0; l0 -> left: 0; t0 -> top: 0; ff -> font-family: sans-serif (with font highlighted ready to be changed) bgc -> background-color: #fff (with fff highlighted ready to be changed) and so forth and so on... Saves tons of typing !!
Thank you Florin, that was very helpful! My JavaScript was VERY rusty and this helped me develop good solid client-side validation checking on the forms I'm using in my Laravel project.
I really appreciate this video. It helped me out tremendously with my first JavaScript project which landed me the opportunity to get my first gig as a developer. Keep up the great work!
I’ve been pulling my hair out trying to understand form validation properly.. thank god I found your video! So simple to understand now, and you’ve gained a new subscriber
Maximum appreciation, Florin. Your tutorials is the best way for beginners to learn how to practically add JavaScript to HTML&CSS files. I've been learning HTML & CSS, and JavaScript syntax from online platforms. But I've not found anyone teaching how to bring them all together in a practical manner like you have. You've literally given me the missing link. My 'Aha!" moment! Great work, Mr Pop.
You're the best tbh. Your tutorials are straightforward and practicable. I only started to enjoy learning programming when I found your channel. Thank you
Thanks so much for this! I have been having a hard time grasping this and have spent over a week reading and watching every video I could find. I am so lucky to have found this! You are awesome!!!
It's cool to see you type the code. I'm new and learning to use editors, so I like to watch the little things that pros do. I'm not sure if you have a "tips and tricks" for editors like Codepen, VisualStudio Code, or any other ones that you use in daily work, but I'd be interested in seeing a basic intro to these as well.
Definitely should be handling the change event by setting the name on all the elements and then getting the name from the event.target.name. No need to get every control in a const
Just a suggestion - when you're writing your css you jump up and down the block adding properties. This means that if you're following along, but perhaps a property or two behind, you look up at the screen and the property you've just written is no longer visible (off the bottom of the screen) as you've gone to the top of the style block to write a different property. Can be pretty jarring! But thanks, great guide!
16:44 I had trouble getting the addEventListener to work. So if anyone has that same problem, try moving your script tag (linking the javascript file) to the end of the body tag of your html file :)
create function at the end of checkInputs called: "formSuccess(email, country, zipcode, password, confirmPassword)" const formSuccess = (...input) => { if (input.every((element) => { return element.parentElement.classList.value === 'form-control success' })) { alert('Form Submitted') } else { return; } } Not sure if this is the best solution, but it def works.
Thanks Florin! You are amazing! I have a question about this tutorial. How do we submit the form after we've done validation? I have trouble doing them both in the same time. I can only send post without validation or get a blank page after sending post with validation. After trying for 4 hours, I add this code below into checkInputs function and finally I can echo out the post data! My code is a mess and I apologize for that, I'm working on organizing it. if (document.querySelectorAll('.form-control')[0].classList.contains('success') && document.querySelectorAll('.form-control')[1].classList.contains('success') && document.querySelectorAll('.form-control')[2].classList.contains('success') && document.querySelectorAll('.form-control')[3].classList.contains('success')) { form.submit() }
ofcourse u can't , you need to use required statement for it. then customized required message for it. Required was default by all browser can pass form action to all post method before sending it to server side render
Hey! I have a question. In the custom functions why you use the username for ex. and not the usernameValue? Now I started to learn JS and I would like to understand it, not just copying the code you provided for us. It is very useful for beginners to know how to do it. Thanks a lot for this video!🤗🤗🤗
Am I the only one who spends too much time on positioning, centering, and all styling and not getting it right haha. Thanks you for this tutorial btw 🙏
Learn how to use 24 different JavaScript Array Methods: th-cam.com/play/PLgBH1CvjOA62PBFIDq55-S6Beivje30A2.html
how you can refresh your misstake inputs, if they are all cons¿
Bro your video was nice but this validation is not working in my form, So could u please tell me what can be the problem or ambiguity.
Florin pop your are doing amazing. I want to tell you one thing zoom in the screen little bit, I am facing difficulties on my Palm device.
Which software
FLORIN POP can you say please why it doesnt go another page? you forgot about action="somewhere.php"
This is hands-down the FINEST form validation tutorial I've ever seen... big salute to you sir!
This was the first video from Florin I ever watched. I came back here today for reference for a project I'm working on. Thanks Florin
Best tut I’ve ever seen on YT. Why cant everyone make tuts this straightforward.
Aww... thank you! I’m happy you like it! ☺️
@@FlorinPop correct me if I’m wrong but the html email check is the same thing as the regex check right? Its just checking for an @ domain. So a@a.c will still work even with the custom function
@@FlorinPop hii sir can you probably provide your whatsapp
I have some doubts
great video Florin! Just found amazing CSS shortcuts:
m0 -> margin: 0;
p0 -> padding: 0;
l0 -> left: 0;
t0 -> top: 0;
ff -> font-family: sans-serif (with font highlighted ready to be changed)
bgc -> background-color: #fff (with fff highlighted ready to be changed)
and so forth and so on...
Saves tons of typing !!
They do indeed! 😃
Thank you Florin, that was very helpful! My JavaScript was VERY rusty and this helped me develop good solid client-side validation checking on the forms I'm using in my Laravel project.
I’m very happy to hear this!!
I really appreciate this video. It helped me out tremendously with my first JavaScript project which landed me the opportunity to get my first gig as a developer. Keep up the great work!
The Best ever made Tutorial on form validations through javascript. Great. A Big Salute
Thank you! I’m very happy you found it useful!
I’ve been pulling my hair out trying to understand form validation properly.. thank god I found your video! So simple to understand now, and you’ve gained a new subscriber
Maximum appreciation, Florin. Your tutorials is the best way for beginners to learn how to practically add JavaScript to HTML&CSS files. I've been learning HTML & CSS, and JavaScript syntax from online platforms. But I've not found anyone teaching how to bring them all together in a practical manner like you have. You've literally given me the missing link. My 'Aha!" moment! Great work, Mr Pop.
try whatsdev's tutorials
I have watched many tutorials ...But the way of writing code by florin is amazing ✌️🎉..Love from india❤️
I would love to see a video of a contact form with the form validation and the feature of having it emailed to your gmail 😀😀 solid video!
@@FlorinPop Please do consider..🙂
I literally just solved this. I can share the source code if you want.
@@senju31 I'm trying the same. It would be a great help for me.
@@senju31 please do
After searching for so many ways this video give me the best solution. Thanks a lot 😊
You're the best tbh. Your tutorials are straightforward and practicable. I only started to enjoy learning programming when I found your channel. Thank you
Aww! That’s so nice of you to say! I’m happy to hear I was helpful 😃
Thanks so much for this! I have been having a hard time grasping this and have spent over a week reading and watching every video I could find. I am so lucky to have found this! You are awesome!!!
You make CodePen look it's the "Chosen One!!!" Love it!
Thanks, Florin this is the perfect amount of detail. Excellent tutorial!
@@FlorinPop No, thank you for putting in the time and effort to make it. I really appreciate it :)
Awesome lecturer, neat and clean way of validating user inputs. Thanks from India
Love the way you control your code, hope to see more video especially for frontend JS. Thanks
Will do!
one of the wonderful quality tutorial on form creation, styling and validation. :)))) Thanks Florin ...I don't know how to make a thumbs up..
Hello Sir, I am Js learner ,typically i saw most video.But I like these video. Which clear and straightforward.
DUDE IM SO HAPPY THAT I SUBSCRIBED TO YOU I SWEAR IM GETTING MY LAPTOP AND IM GONNA LEARN MUCH FROM YOU LOVE YOU BRO FROM THE NETHERLANDS
you r the best u save my university degree this year
all love
too xD
I appreciate the project challenge you have there it helps me to practice my JS coding
Thank you Florin 😊 I like this video to learn about HTML CSS and Javascript. I hope to see more video especially for beginner.
It's cool to see you type the code. I'm new and learning to use editors, so I like to watch the little things that pros do. I'm not sure if you have a "tips and tricks" for editors like Codepen, VisualStudio Code, or any other ones that you use in daily work, but I'd be interested in seeing a basic intro to these as well.
Noted! Thank you
nice video. I liked the the design of the form and the logic behind the validation.
Great lesson, teacher. Your VS skills are something really coool!
I was very glad to watch this tutorial.
Felicitati, Florin!
Multumesc 😃
this was an absolutely phenomenal tutorial. thank you so much!!
Best tutorial a have ever seen) Thank You
I really love your tutorial because it's awesome and looks way cool! It's actually my first time seeing your video!
Thank you for the great job. It would be nice to explain how to submit the form after data validation.
This is a great and helpful video. I had an assignment and it helped me a lot. Thank you!
Thanks so much Florin! Awesome tutorial!
Very neat video in terms of the information provided, thank you very much for helping us.
Thanks for the great effort for community.
First, thank you for not having shitty music at all. Second, thank you for being specific. Third, I subscribed after this, rock on!
Thank you 🙏
This vedio got something in css and js both, woah it feels good clearing the doubt.
I know i'm kinda late but still thank you very much ! Your code is very clean and understandable, very appreciate your work !! :)
Excellent tutorial! You deserve more views. Awesomeness!
That was awesome. Thank you so much for this great tutorial!
Great video, thanks!!
This is by far the best tutorial I've ever followed. Thank you so much!
Florin is definitely my new favourite instructor. Thank you
I am from india..i had problem with foreign accents.but yours fine and clear.
Definitely should be handling the change event by setting the name on all the elements and then getting the name from the event.target.name. No need to get every control in a const
Straight to the point 👏🏻👏🏻
Keep the hard work, man.
thank you Florin for the great tutorial, it was just what I needed..
Thank you for this video!
The perfect tutorial doesn't exi...
Thank you so much Florin! :D
Foarte misto!
Ma bucur ca iti place 😃
@@FlorinPop am aflat de canal de la traversy media. Am o grămadă de treaba zilele astea :) super tare. Meriți mult mai mti subscriberi
Ovidiu Blaga Multumesc pentru cuvintele frumoase! De unde ai aflat de la Brad? Twitter sau TH-cam?
@@FlorinPop de la videoul cu password generator în javascript
Thanks for making this video. it's helpful!
Gladly
Thanks for this great video Florin...
I like your code. Clear and understandable !👍👍
Thank you Florin
Great tutorial
Just a suggestion - when you're writing your css you jump up and down the block adding properties. This means that if you're following along, but perhaps a property or two behind, you look up at the screen and the property you've just written is no longer visible (off the bottom of the screen) as you've gone to the top of the style block to write a different property. Can be pretty jarring!
But thanks, great guide!
16:44 I had trouble getting the addEventListener to work. So if anyone has that same problem, try moving your script tag (linking the javascript file) to the end of the body tag of your html file :)
you save my life bro :D
bro thankyou, u really saved me
how
I am still not able to get it working ??
U SAVED ME ❤
Great tutorial! Thanks for posting.
Great presentation.
I've been using vscode for about a month and I never knew that shorthand element creator feature @ 2:07 was a thing. Thanks :)
A lifesaver. Thanl You! :)
A very nice work !!! Excellent ! Thanks ! I'm just using a text editor but it works !
Hi, Can you tell me please that in 16:43 you make an argument 'e' , so what will it target and how?
(e) = event , search up for more information in google , u can find alot information.
create function at the end of checkInputs called:
"formSuccess(email, country, zipcode, password, confirmPassword)"
const formSuccess = (...input) => {
if (input.every((element) => {
return element.parentElement.classList.value === 'form-control success'
})) {
alert('Form Submitted')
} else {
return;
}
}
Not sure if this is the best solution, but it def works.
Thank you so much, bro, this is a great tutorial. God bless you! Regards from Russia. 04.12.2021
Amazing bro thanks so much from Iran❤
Thank you Florin, invaluable tutorial, thumbs up!
👍🏻👍🏻👍🏻
Thanks Florin! You are amazing!
I have a question about this tutorial.
How do we submit the form after we've done validation?
I have trouble doing them both in the same time.
I can only send post without validation or get a blank page after sending post with validation.
After trying for 4 hours, I add this code below into checkInputs function and finally I can echo out the post data!
My code is a mess and I apologize for that, I'm working on organizing it.
if (document.querySelectorAll('.form-control')[0].classList.contains('success') && document.querySelectorAll('.form-control')[1].classList.contains('success') && document.querySelectorAll('.form-control')[2].classList.contains('success') && document.querySelectorAll('.form-control')[3].classList.contains('success')) {
form.submit()
}
the form is only reloading but it is not submitting
I am face a problem. This validation is awesome but can't work form action. Like action.php. why the submit button can't procced to the action page.
ofcourse u can't , you need to use required statement for it. then customized required message for it. Required was default by all browser can pass form action to all post method before sending it to server side render
@@rohanisembiring2889 can you please be elaborate with your message? I'm also trying to build something like @Md
Hey guy, Can you make video about Javascript , how to improve Javascript skills? Thank you
Thank you. I learned a lot.
Thanks, man
very helpful and informative video.
As always helping me a lot w/ ur vids :)
Thanks for such a useful video, keep up the good work.
Hey! I have a question. In the custom functions why you use the username for ex. and not the usernameValue? Now I started to learn JS and I would like to understand it, not just copying the code you provided for us. It is very useful for beginners to know how to do it. Thanks a lot for this video!🤗🤗🤗
But it doesnt go to another page(action="formControl.php")?..e.pereventDefault is in right place?
This is organized and really very easy to understand, Thank you Florin
Great tutorial! Very useful. Especially for me 'cause I just learning about Form Validation in PHP, so now I could compare. Thank You Florin!
Your welcome 🙏
It's left to implement the server-side back-end stuff I guess ... And it's all on our own. ;_|
thanks for the tutorial
great job! thanks for sharing!
Super great tutorial and very well and simply explained for a beginner like me!thanks a lot!!!!
Thank you for watching 😃
Very well explained!
Clear as a crystal!
awesome, thanks for tutorial
You’re welcome
Thank you, Florin.
Thanks pal, you saved my day
You just helped me a lot buddy ❤️
Awesome tutorial...💥♥️
Am I the only one who spends too much time on positioning, centering, and all styling and not getting it right haha. Thanks you for this tutorial btw 🙏
NICE INFORMATIVE .WELL DONE
Good job, Florin.
you are the best , thank you
😍
Thanks dude!
easy and wonderful
Great video! but why you have to press submit so I can if its valid or not? isn't better if it will show valid directly?
on submitting form nothing is happening ! please help
How would you combine this with a POST Request?
could use the fetch() API in JavaScript, the API would communicate with the server code