JavaScript Client-side Form Validation

[@FlorinPop]

Learn how to use 24 different JavaScript Array Methods: kzbin.info/aero/PLgBH1CvjOA62PBFIDq55-S6Beivje30A2

[@ignaciobascougnet8471]

how you can refresh your misstake inputs, if they are all cons¿

[@mrollins8277]

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.

[@SpscMedia]

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.

[@utkarshtenguria3836]

Which software

[@turaleyyub5746]

FLORIN POP can you say please why it doesnt go another page? you forgot about action="somewhere.php"

[@aleb687]

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 !!

[@FlorinPop]

They do indeed! 😃

[@archangel0137]

This is hands-down the FINEST form validation tutorial I've ever seen... big salute to you sir!

[@thomassankara9980]

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

[@tenminutetokyo2643]

Best tut I’ve ever seen on YT. Why cant everyone make tuts this straightforward.

[@FlorinPop]

Aww... thank you! I’m happy you like it! ☺️

[@hikari1690]

@@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

[@baithivinaykumar]

@@FlorinPop hii sir can you probably provide your whatsapp I have some doubts

[@anilporella7201]

The Best ever made Tutorial on form validations through javascript. Great. A Big Salute

[@FlorinPop]

Thank you! I’m very happy you found it useful!

[@dontavious3591]

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!

[@ajitganjave8837]

🎯 Key Takeaways for quick navigation: 00:00 🛠️ The video tutorial demonstrates how to implement client-side form validation using JavaScript for a form with four input fields: username, email, password, and password check. 01:22 📝 The tutorial is divided into two parts: HTML/CSS implementation and JavaScript implementation. Viewers can skip the HTML/CSS section if they prefer. 05:42 🎨 The HTML/CSS part focuses on building the basic layout and styling of the form, including form containers, headers, labels, inputs, icons, and error messages. 15:25 ⌨️ JavaScript code is used to add event listeners to the form submission and validate the inputs' values. 19:27 ✅ The form validation checks if the input fields are empty and if the email is in a valid format using regular expressions. 23:47 🔑 For invalid inputs, appropriate error messages are displayed, and error classes are added to indicate errors in the form controls' styling. 28:20 🎊 As an extra challenge, viewers are encouraged to implement a success message when all form inputs have valid values.

[@hughmungus1767]

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]

I’m very happy to hear this!!

[@jryan2356]

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

[@pearlstar1427]

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 :)

[@SonNguyenVie]

you save my life bro :D

[@saladd2244]

bro thankyou, u really saved me

[@joshuaerana1249]

how

[@keyurbarot8663]

I am still not able to get it working ??

[@ma.chelseajoyyoung1228]

U SAVED ME ❤

[@kenkioqqo]

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.

[@gunnerdreem]

try whatsdev's tutorials

[@kensleylewis]

You make CodePen look it's the "Chosen One!!!" Love it!

[@moussaouikhouloud]

you r the best u save my university degree this year all love

[@kulvannda]

too xD

[@pranjalverma9171]

Hi, Can you tell me please that in 16:43 you make an argument 'e' , so what will it target and how?

[@storyofafootballer5261]

(e) = event , search up for more information in google , u can find alot information.

[@likhithsasank8017]

I have watched many tutorials ...But the way of writing code by florin is amazing ✌️🎉..Love from india❤️

[@rahulghodmare5394]

Hello Sir, I am Js learner ,typically i saw most video.But I like these video. Which clear and straightforward.

[@wesleyfeller2114]

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!

[@sangramnath3452]

@@FlorinPop Please do consider..🙂

[@senju31]

I literally just solved this. I can share the source code if you want.

[@lauraochoa96]

@@senju31 I'm trying the same. It would be a great help for me.

[@mknight7209]

@@senju31 please do

[@geebsayshi]

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

[@FlorinPop]

Aww! That’s so nice of you to say! I’m happy to hear I was helpful 😃

[@syner144]

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

[@worthitmakethis7792]

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!!!

[@RedEyedJedi]

Thanks, Florin this is the perfect amount of detail. Excellent tutorial!

[@RedEyedJedi]

@@FlorinPop No, thank you for putting in the time and effort to make it. I really appreciate it :)

[@vuongtran5799]

Love the way you control your code, hope to see more video especially for frontend JS. Thanks

[@FlorinPop]

Will do!

[@peters7278]

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.

[@FlorinPop]

Noted! Thank you

[@gauravpanwar4413]

After searching for so many ways this video give me the best solution. Thanks a lot 😊

[@ninja-gh]

Awesome lecturer, neat and clean way of validating user inputs. Thanks from India

[@riteshmahajan5209]

one of the wonderful quality tutorial on form creation, styling and validation. :)))) Thanks Florin ...I don't know how to make a thumbs up..

[@Anahitacode]

Best tutorial a have ever seen) Thank You

[@renatoloefstop]

nice video. I liked the the design of the form and the logic behind the validation.

[@676005ga]

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() }

[@yondaime8520]

the form is only reloading but it is not submitting

[@isaackash2401]

I was very glad to watch this tutorial.

[@zdarofMERGAITES]

Great lesson, teacher. Your VS skills are something really coool!

[@ankurtyagi4770]

Thanks for the great effort for community.

[@alanthomasgramont]

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

[@tradewinds9832]

Excellent tutorial! You deserve more views. Awesomeness!

[@timtech9361]

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.

[@ATIWatchReviews]

Florin is definitely my new favourite instructor. Thank you

[@arjanelor9568]

I appreciate the project challenge you have there it helps me to practice my JS coding

[@nahorovidiu8307]

Felicitati, Florin!

[@FlorinPop]

Multumesc 😃

[@jflo911b]

Thanks so much Florin! Awesome tutorial!

[@dominicamaljoef6693]

Thanks for this great video Florin...

[@williamlowry]

this was an absolutely phenomenal tutorial. thank you so much!!

[@legitimategamerhd6773]

I've been using vscode for about a month and I never knew that shorthand element creator feature @ 2:07 was a thing. Thanks :)

[@RAHULROY-sb9nt]

I am from india..i had problem with foreign accents.but yours fine and clear.

[@nickwoodward819]

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!

[@nohaderwa]

Straight to the point 👏🏻👏🏻 Keep the hard work, man.

[@l3_p14f9]

First, thank you for not having shitty music at all. Second, thank you for being specific. Third, I subscribed after this, rock on!

[@FlorinPop]

Thank you 🙏

[@mizuesato4775]

Thank you Florin 😊 I like this video to learn about HTML CSS and Javascript. I hope to see more video especially for beginner.

[@mahdimotallebi7207]

Thank you Florin Great tutorial

[@kimjiyoung8655]

Thank you so much Florin! :D

[@aurielklasovsky1435]

That was awesome. Thank you so much for this great tutorial!

[@amitsinha5621]

This vedio got something in css and js both, woah it feels good clearing the doubt.

[@The_Daily_Shorts]

Thanks for making this video. it's helpful!

[@FlorinPop]

Gladly

[@elrasheedsiddig7711]

This is a great and helpful video. I had an assignment and it helped me a lot. Thank you!

[@medmess254]

Thank you for the great job. It would be nice to explain how to submit the form after data validation.

[@Zsh3107]

Amazing bro thanks so much from Iran❤

[@cynthiamanor6565]

Great tutorial! Thanks for posting.

[@nicholascottle8531]

The perfect tutorial doesn't exi...

[@decall]

thank you Florin for the great tutorial, it was just what I needed..

[@spakklife]

I really love your tutorial because it's awesome and looks way cool! It's actually my first time seeing your video!

[@bouhellalmokhtaraymene5487]

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 ?

[@FlorinPop]

Submit manually with form.submit()

[@bouhellalmokhtaraymene5487]

@@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

[@touhidh6]

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.

[@rohanisembiring2889]

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

[@EmmanueloluseyiAdeniyi]

@@rohanisembiring2889 can you please be elaborate with your message? I'm also trying to build something like @Md

[@edgarspujats8282]

I know i'm kinda late but still thank you very much ! Your code is very clean and understandable, very appreciate your work !! :)

[@TheDream975]

I like your code. Clear and understandable !👍👍

[@lucasruiz6176]

Very neat video in terms of the information provided, thank you very much for helping us.

[@juantato2012]

This is by far the best tutorial I've ever followed. Thank you so much!

[@AlMagic911]

Great video, thanks!!

[@digihz_data]

Great presentation.

[@swapnilcodes]

Awesome tutorial...💥♥️

[@AdriiPing]

As always helping me a lot w/ ur vids :)

[@libertad83y]

Thank you Florin, invaluable tutorial, thumbs up!

[@FlorinPop]

👍🏻👍🏻👍🏻

[@John-wx3zn]

Thank you. I learned a lot.

[@helgeope]

Very well explained!

[@fernastereo]

Thanks pal, you saved my day

[@ovidiublaga1]

Foarte misto!

[@FlorinPop]

Ma bucur ca iti place 😃

[@ovidiublaga1]

@@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

[@FlorinPop]

Ovidiu Blaga Multumesc pentru cuvintele frumoase! De unde ai aflat de la Brad? Twitter sau KZbin?

[@ovidiublaga1]

@@FlorinPop de la videoul cu password generator în javascript

[@kto523]

Thank you for this video!

[@pascalgage2695]

A very nice work !!! Excellent ! Thanks ! I'm just using a text editor but it works !

[@Omar_Muhammad]

Thanks, man very helpful and informative video.

[@zubaydullo_abdirakhmonov]

Thanks for such a useful video, keep up the good work.

[@alfrugo]

great job! thanks for sharing!

[@rakeshkharvi3029]

You just helped me a lot buddy ❤️

[@Onlineteaching10]

NICE INFORMATIVE .WELL DONE

[@hamzajirah]

Good job, Florin.

[@sabuein]

Thank you, Florin.

[@ZuzzuKiller]

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.

[@dipzera1025]

How would you combine this with a POST Request?

[@ChrisSmith-zn3li]

could use the fetch() API in JavaScript, the API would communicate with the server code

[@faruquedewan]

A lifesaver. Thanl You! :)

[@dienhoangkhai6025]

Hey guy, Can you make video about Javascript , how to improve Javascript skills? Thank you

[@robertoenriquechavezrodrig731]

Thank you so much, bro, this is a great tutorial. God bless you! Regards from Russia. 04.12.2021

[@Shriram-ty2kk]

Clear as a crystal!

[@raigeki002]

what editor are you using for your videos? i like the 'auto-update' rendering on the output side!

[@quickfoods_qf]

This is organized and really very easy to understand, Thank you Florin

[@abdishakur2489]

Wow great video subscribed it instantly 😍.

[@FlorinPop]

Thank you 🙏

[@mansoormohmand5852]

easy and wonderful

[@pjguitar15]

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 🙏

[@sakshipatil2094]

Love from India ❤️❤️❤️

[@renemorales9364]

great tutorial 👍

[@ozzyozborne4539]

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?

[@turaleyyub5746]

But it doesnt go to another page(action="formControl.php")?..e.pereventDefault is in right place?

[@syberiaok]

Super great tutorial and very well and simply explained for a beginner like me!thanks a lot!!!!

[@FlorinPop]

Thank you for watching 😃