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 !!
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!
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.
@@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
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.
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
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.
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
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 :)
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
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!
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
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.
@@FlorinPop thank you very much sir it's working I have another problem is there any way to prevent the page from refreshing because I have another form hidden under the original one so by completing the first form the page will be refreshed and I will lose progress and can't get to the second form
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 🙏
I actually found a solution. It consists on adding a boolean var into checkInputs and returning true to a conditional statement if the user has filled correctly everything. In this case you could write something like: If (checkInputs()){'e.target.submit();} being careful to erase any Id that could have been called 'submit', so it doesn't collide.
You would have to have a database server and connect to it via PHP (for example), then pass the data from the form to some PHP code via fetch API (for example), the PHP code would be written to insert the data into a users table (for example)
Hey Florin Can you make a tutorial on how to create the background slider from your 100 Days 100 Projects? And can you make a tutorial on how you created the landing page for your personal webpage? I'm most interested in the "See what others say" section with the slider underneath and the text to right that disappears after the slider is full. Thanks in advance!
@@FlorinPop doctument.getElementById("submit").submit(); sir I'm little confused when I need to put it in my code, plz If you can help me and thank you alot for your effort
Show message if everything is checked: const formControll = document.getElementsByClassName('form-control') function forSuccessMessage() { let success = 0 for (i = 0; i < formControll.length; i++) { let formIterate = formControll let check = formIterate[i].classList.contains('success') if (check !== true) { success++ break } } if (success === 1) { return 0 } else { console.log('success') } }
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"
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! 😃
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
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!
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!!
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
The Best ever made Tutorial on form validations through javascript. Great. A Big Salute
Thank you! I’m very happy you found it useful!
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’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
I have watched many tutorials ...But the way of writing code by florin is amazing ✌️🎉..Love from india❤️
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!!!
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
Hello Sir, I am Js learner ,typically i saw most video.But I like these video. Which clear and straightforward.
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
one of the wonderful quality tutorial on form creation, styling and validation. :)))) Thanks Florin ...I don't know how to make a thumbs up..
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 😃
Love the way you control your code, hope to see more video especially for frontend JS. Thanks
Will do!
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 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 :)
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 ❤
you r the best u save my university degree this year
all love
too xD
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
Awesome lecturer, neat and clean way of validating user inputs. Thanks from India
Thank you Florin 😊 I like this video to learn about HTML CSS and Javascript. I hope to see more video especially for beginner.
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
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.
Excellent tutorial! You deserve more views. Awesomeness!
Great lesson, teacher. Your VS skills are something really coool!
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!
nice video. I liked the the design of the form and the logic behind the validation.
Best tutorial a have ever seen) Thank You
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
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.
I appreciate the project challenge you have there it helps me to practice my JS coding
I really love your tutorial because it's awesome and looks way cool! It's actually my first time seeing your video!
Straight to the point 👏🏻👏🏻
Keep the hard work, man.
I was very glad to watch this tutorial.
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 is a form validation so we need to send some data to the server but this isn't gonna happen by using the preventdefault methode , any solution ?
Submit manually with form.submit()
@@FlorinPop thank you very much sir it's working
I have another problem is there any way to prevent the page from refreshing because I have another form hidden under the original one so by completing the first form the page will be refreshed and I will lose progress and can't get to the second form
I am from india..i had problem with foreign accents.but yours fine and clear.
Thank you for the great job. It would be nice to explain how to submit the form after data validation.
Felicitati, Florin!
Multumesc 😃
This is a great and helpful video. I had an assignment and it helped me a lot. Thank you!
Very neat video in terms of the information provided, thank you very much for helping us.
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 so much Florin! Awesome tutorial!
I know i'm kinda late but still thank you very much ! Your code is very clean and understandable, very appreciate your work !! :)
This vedio got something in css and js both, woah it feels good clearing the doubt.
Thanks for the great effort for community.
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 🙏
The perfect tutorial doesn't exi...
That was awesome. Thank you so much for this great tutorial!
I like your code. Clear and understandable !👍👍
This is by far the best tutorial I've ever followed. Thank you so much!
But it doesnt go to another page(action="formControl.php")?..e.pereventDefault is in right place?
Florin is definitely my new favourite instructor. Thank you
How would you combine this with a POST Request?
could use the fetch() API in JavaScript, the API would communicate with the server code
this was an absolutely phenomenal tutorial. thank you so much!!
Thank you Florin
Great tutorial
how do I now to go to another page? after it is valued it doesn’t leave this page anymore
create another page and link it to the submit button
Amazing bro thanks so much from Iran❤
Thanks for this great video Florin...
Someone can help me? I copy and paste the code but when all the fields are correct the submit button don't work, seems like the js block the submit.
the e.preventDefault() does not allow me to submit the form even when everything is fine. but if i take it out it does not validate how do i fix this
ive got the same problem, and ive been hitting my head in the keyboard for almost 24 hours now. If you find any answer, please, share with me!
Same
I actually found a solution. It consists on adding a boolean var into checkInputs and returning true to a conditional statement if the user has filled correctly everything. In this case you could write something like:
If (checkInputs()){'e.target.submit();}
being careful to erase any Id that could have been called 'submit', so it doesn't collide.
can you elaborate more please, thank you
@@brenoverissimo3846 thank you so much ❤❤❤
I've been using vscode for about a month and I never knew that shorthand element creator feature @ 2:07 was a thing. Thanks :)
thank you Florin for the great tutorial, it was just what I needed..
Thank you so much Florin! :D
Thanks for making this video. it's helpful!
Gladly
Great video, thanks!!
why i can't submit the form even with the correct inputs ?
me to what's the problem
As always helping me a lot w/ ur vids :)
Hey guy, Can you make video about Javascript , how to improve Javascript skills? Thank you
Great tutorial! Thanks for posting.
its great but after following the same steps my submit button + java script not working anymore..how to fix that?
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?
the same technique Brad Traversy used
@Paul Maximus No big deal... devs all learn from each other!
Thanks, man
very helpful and informative video.
Thanks for such a useful video, keep up the good work.
Thank you so much, bro, this is a great tutorial. God bless you! Regards from Russia. 04.12.2021
Thank you Florin, invaluable tutorial, thumbs up!
👍🏻👍🏻👍🏻
on submitting form nothing is happening ! please help
A very nice work !!! Excellent ! Thanks ! I'm just using a text editor but it works !
Very good tutorial, but I have a question because when I press submit it does not send the data by preventDefault().
You have to submit it manually. form.submit() when everything is alright
@@FlorinPop how to add form.submit () and a message/alert that says submitted successfully??
Great video, I love the look of the form! However when I press submit, it doesn't actually create an account do you know how to do that?
You would have to have a database server and connect to it via PHP (for example), then pass the data from the form to some PHP code via fetch API (for example), the PHP code would be written to insert the data into a users table (for example)
Great presentation.
Muy bueno esta esa validacion.. mi pregunta es como lo envio por ajax cuando todo el formulario este validado...de antemano muchas gracias...
Hey Florin
Can you make a tutorial on how to create the background slider from your 100 Days 100 Projects? And can you make a tutorial on how you created the landing page for your personal webpage? I'm most interested in the "See what others say" section with the slider underneath and the text to right that disappears after the slider is full.
Thanks in advance!
Awesome tutorial...💥♥️
Thank you. but how can I upload all file html, css & js in a website?
This form does not get submitted after all the fields are validated with green success.why?
Because we preventDefault at the beginning of the submit event. You need to submit it manually in JavaScript calling the submit() function.
@@FlorinPop doctument.getElementById("submit").submit(); sir I'm little confused when I need to put it in my code, plz If you can help me and thank you alot for your effort
Good job, Florin.
what editor are you using for your videos? i like the 'auto-update' rendering on the output side!
Show message if everything is checked:
const formControll = document.getElementsByClassName('form-control')
function forSuccessMessage() {
let success = 0
for (i = 0; i < formControll.length; i++) {
let formIterate = formControll
let check = formIterate[i].classList.contains('success')
if (check !== true) {
success++
break
}
}
if (success === 1) {
return 0
} else {
console.log('success')
}
}
You just helped me a lot buddy ❤️
bro thanks for your great tutorial .
how we can find that there isn't any error now and call a method for example an ajax call?
You’ll do it at the end when all the checks are passed.
@@FlorinPop not bad idea but you have seperated all of conditions.
with your current JS structure i think it's not possible
@@mehdizeinali2557 me facing the same problem now
Thank you sir Florin. Do you have any tutorial on how to connect the data to the database?
Could you kindly show how to make this responsive?
Media queries i guess.....