The BEST way to do form validation in JavaScript

[@codewithbubb]

Do you ever create your own form validation in JavaScript now? Or are you using some package/library with your React/Angular/Vue projects?

[@celfabri-n7h]

I came here for the validation but I am so glad that I watched you put that form together as well. Great stuff.

[@codewithbubb]

Cheers! Hope you found it useful.

[@astroboy3720]

KZbin need more stuff like that, every channel has the same extra-beginner stuff, thank you 🙏🙏⭐⭐

[@codewithbubb]

Cheers! Yeah, I did some polls in the community tab here a few months ago and people are asking for more advanced stuff so glad you found it useful!

[@okolipeace774]

This is such a great video, and so easy to understand. So glad i found it, it really helped clear some questions i had about form validation. Thank you

[@codewithbubb]

Thanks very much! Glad you found this useful! Appreciate your support.

[@MonotonyTV]

Good to see you were on my KZbin Home Page today - 27.05.2022 08:07

[@codewithbubb]

Glad you dropped by for a watch 😉

[@mabillama]

Great thinking and logic implementation. A masterclass

[@joeljefferson1310]

Thanks, It was very helpful!

[@codewithbubb]

Great! Glad you found it useful.

[@nehakannaujia9165]

Really nice video thanks for sharing , wish I had seen it before. We need more stuff like this which is for advance levels. Good job

[@codewithbubb]

Thank you very much! Glad you found it useful.

[@nehakannaujia9165]

@@codewithbubb I would love see more advance level video on react as I m just finishing basic level and still not very confident how we usually work in actual projects in job. If you could please make more videos on react similar to this one please that would be awesome :-)

[@codewithbubb]

Well, i'm not sure what you mean by 'advanced' but I have quite a few React projects on the channel at the moment: kzbin.info/aero/PLpc_YvcwbxaTqVUVgWQhISClv_mniIm2o but i'll probably be doing some more stuff in the future so watch out for that 😉

[@nehakannaujia9165]

@@codewithbubb by advanced i meant how we use in actual projects that is reusable and better structured like this form validation. I have seen lots of react tutorial on state, use effects and they just show the basic stuff for a simple method. Would like to see more how we use it in real complex applications. Perfect thanks i will check those out

[@LagrangePoint0]

Awesome tutorial!

[@_r4in.1]

hey! idk why i'm not getting the errors and no texts appear.. idk why is that, but can you give me the source-code so i can see what im doing wrong.. ?

[@codewithbubb]

Sorry to hear you're having problems. Here's the code for the tutorial: github.com/codebubb/javascript-form-validation-tutorial

[@johnoppong876]

Very helpful

[@codewithbubb]

Thanks John!

[@Christy-Bee]

Thanks Bubb for this video, which goes way further in code structuration then most I have seen on this topic. I just wonder why you chose to add the icon elements in the HTML instead of creating / removing them in the JS script. Would you proceed that way in real life or is it only for the video purposes?

[@codewithbubb]

Thanks very much. With regards to the icons - can't remember what my thoughts were with this originally! I guess it depends on how you were going to make use of this validation script in other projects - if you wanted it to be flexible I would probably put the icons in the markup and then get the script to show/hide them which means you can replace them with whatever icons you wish (and adjust layout etc with each project). Adding/removing them from the script offers more out-of-the box functionality if you wanted to reuse the script as you wouldn't have to provide icons etc just plug the validation script in and it works without any further requirements. So different scenarios depending on how you wanted to use the script in different projects I guess.

[@sidarjunful]

Excellent

[@codewithbubb]

Thanks very much Siddharth!

[@ryanwalter9373]

I really want to understand how the minLength attribute property had more precedence over the required attribute property

[@relja_]

Really nice video, very different from other validation vids out there. I have a question. What's the difference between your method and using checkValidity() method from JS api?

[@falanlaguerre3799]

Thank you for the great video, should this work for 'select' tags as well?

[@inteltone]

If you use event.preventDefault() in your validation function, you need to manually submit the form if it is valid. Am I right? For example, if(valid) { formElement.submit() }

[@codewithbubb]

Yeah absolutely right! If you preventDefault on a form submit the action of the form is stopped so to continue you it you can submit the form manually or (more probable) send the data from the form off to an API endpoint for submission e.g. via Fetch.

[@anitaabdurrahmani8354]

Hi, where can I find the code of your tutorial, because I don't wanna spend time on html/css part.. Thank you!

[@codewithbubb]

Hi Anita, it’s all on GitHub: github.com/codebubb/javascript-form-validation-tutorial

[@j4ck3]

nice work man

[@zuekiin]

After the first validationOptions for the required attribute my form only display error for only the first input field. Does anybody else have the same issue?

[@Christy-Bee]

Yep! I encountered same issue and checked my HTML file. I had a typo in error-icon which I initally entered with 1 r (eror). You probably have the same type of issue. Check the spelling!

[@codewithbubb]

Hi, yeah would probably need to take a look at your code if you're still having problems if you can share it at all. Like @Christy-bee says - check for typos!

[@codewithbubb]

Thanks for helping out!

[@nenadbanjeglav2081]

This is sooo good! Thanks a lot!

[@codewithbubb]

Thanks very much!

[@lukas.szarkowski]

Would you post the code for this tutorial? :)

[@codewithbubb]

Yep sure, I’ll share the GitHub repository with you when I get a chance.

[@lukas.szarkowski]

@@codewithbubb Great! I can't wait! :D

[@codewithbubb]

Here's the code Lukas: github.com/codebubb/javascript-form-validation-tutorial It's probably worth saying you might want to return true/false for the overall validation function if you were going to apply this to a form you were using. Hope that helps!

[@lukas.szarkowski]

@@codewithbubb Thanks a lot! I am just learning the forms and you fell out of the sky for me! I will study it calmly and it will be useful in the future.

[@codewithbubb]

Ok no problems! Let me know if you have any questions!

[@romanryabchinskiy5521]

Thank you for good lesson. But I encountered problem. Submit doesn't work (page doesn't reload after filling form and pressing submit button. Please could you help me with this issue! Thank you in advdnce!

[@inteltone]

If you use event.preventDefault() in your validation function, you need to manually submit the form if it is valid. For example, if(valid) { formElement.submit() }

[@jaylonnichols5504]

Great video but it there is a problem. The error message will not go away until I have clicked the submit button twice and then it will go away. Does anyone know why this is?

[@takisnani5337]

Hi, Thanks for the tutorial! I'm wondering if someone edit our html with the inspect element? it will work? Thanks again!

[@marie484]

Hello. A great code for validation. I've tried doing it on my own form and it worked fine when the form was placed in the html code, but when I rewrote the code and loaded the form dynamically the validation no longer worked. Getting error here: formElement.setAttribute('novalidate', ' ' ); Uncaught TypeError: Cannot read properties of null (reading 'setAttribute') at validateForm (main.js:376:17) i.e. now only the html validation works. What can I do to make the javaScript validation work instead?? 🙂

[@saipavankumar4498]

Hi sir Can u provide the source code

[@codewithbubb]

Hi, it's on GitHub the JS code can be found here: github.com/codebubb/javascript-form-validation-tutorial/blob/main/script.js

[@muhammadIbrahim-vd9fm]

sourc code plase

[@DeveshKumar-hs4qo]

i spent two days on your project but i didn't get your logics in JavaScript you were just writing code without explaining it properly, you really demotivated bro🥲🥲

[@codewithbubb]

So sorry to hear that Devesh. There was a lot to go through in this tutorial and I wanted to keep a good pace so it didn’t turn into a lengthy, dull tutorial. If there’s any thing I can elaborate, please don’t hesitate to ask and I’ll do my best to explain 😂