Form validation using Javascript on the client side for beginners

In this video, we will create a client-side #form #validation using #javascript. I'll only use vanilla javascript and no external 3rd party dependencies. The aim is to help beginners to do form validation and understand how the whole process works.
Website: www.javascriptacademy.dev/
Source code: codepen.io/javascriptacademy-...
⏱Timestamps:
00:00 Intro
00:26 HTML
03:33 CSS
05:35 Javascript
Where you can find me?
🔗 Links:
* 🍺 Support free education and buy me a beer: ko-fi.com/adamnagy
* 💬 Discord: / discord
* 📧 Newsletter: www.getrevue.co/profile/dev_a...
* ✍️ Blog: dev.to/javascriptacademy
* 🐦 Twitter: / dev_adamnagy
* 📷 Instagram: / javascriptacademy

[@mohammedanafm]

Form validation using javascript was so difficult but thanks to this simple explanation, I was able to get an idea of how it works.

[@zoirradjabov1420]

Simple and effective! That exactly what I needed

[@JsAcademyOfficial]

New web development tutorial from me: Memory card game using Javascript, HTML, and CSS: 🔥
th-cam.com/video/xWdkt6KSirw/w-d-xo.html

[@CLICK4CAST]

hi, i am getting " Uncaught TypeError: Cannot read properties of undefined (reading 'querySelector') " it is showing at setError() line number. can you help me

[@hunterzone4846]

Thanks for this. You explained everything clearly.

[@vladropotica5687]

Thank you very much. I recently started learning JavaScript, this video is the first video in 4 consecutive ones that finally worked (for me at least) without problems that i didn't know how to solve.

[@JsAcademyOfficial]

That’s really great to hear! I’m glad I could help 😉

[@photoinshot1355]

Thanks for a great tutorial! How do you get the form to submit if it passes validation?

[@hyllaf]

would anyone know - whilst creating a SIGN UP FORM - how to get the submit button the same exact size at the input boxes?

[@Shalamandez]

Thanks for this video. So simplified

[@m.j.mcintear793]

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

[@gorreon]

Thank you so much for this great tutorial! Saved me a lot!

[@wajry]

Brief and helpful, thanks!

[@mikensonpierre2029]

Would it be an issue if we use the same div class = "input-control" instead of creating multiple and just changing the id and name?

[@tonytony-fc6gq]

HOW DO YOU clear the input field after successful submit??

[@hishamrabea566]

Bro greatings from Egypt!
You are great you helped me really ❤

[@guillermomazzari4983]

Thanks a lot!! This was very useful!!!

[@Blessed-d8r]

How do you write the exponential symbol?

[@IPlayWhatiLike]

Great video. Short, to the point, and well explained.

[@janakiramanjohn4753]

Great video bro,thank you very much

[@justrising4027]

Please can anyone help with making the form submit?

[@user-lg7vm2eo1v]

Simple and understandable. Thanks

[@ooooo5598]

how can i go to other page if i click

[@OliaYarukhina]

Cool! Thank you so much!

[@sh9vch9nk0]

Very useful video and clear explanations, thank you for this tutorial 💗💗

[@visenyaa19]

thank you so much for your great video

[@evangelistaa.r.8242]

Thank you for this tutorial it helped me a lot😊

[@JsAcademyOfficial]

Great to hear that! 😊

[@Demon_T8_]

will this be saved ? i want to login with the signed id and password only

[@MBXD001]

Very helpful video, for me this worked, nothing else was working

[@web__designerr]

how to redirect the next page

[@MohamedAli-nn5ld]

Amazing video!

[@viniciusm.m.7822]

Wow
Thanks, man!

[@alwayshibu]

very helpful turorial.

[@shankysontakke3253]

This is so 👍 great Need more videos on javascript...

[@JsAcademyOfficial]

Thanks for the kind words Shanky!
A few more videos are in progress, in the meanwhile you can check my other videos on javascript 😉

[@zachfenton608]

Very well done. May I use the code in my project. I will add on to it.

[@jeo8007]

why i cant submit the form??

[@igraphicsalliance]

it's work but the form not work (PHP) why?

[@HienTran-lo3jh]

thank you bro thumbs up

[@christianjack1250]

Great job

[@ahmetbiba2489]

Thank you so much everything is working but i need a little help at the submit button i have to make a link to anther page after i fill all the boxes is it possible.

[@JsAcademyOfficial]

You can use the action attribute of the form element or you can send an xmlhttprequest to any backend endpoint

[@user-hj6en4be1f]

Thank you so much.....

[@n0lame]

does anyone know how I would be able to transfer the information gathered from this form into MySQL using XAMPP? I've never used these programs before and I'm confused

[@mahek9015]

event I need this! Did u find the solution?

[@johnajil6379]

Thank you

[@AkshaPatel-hy7qo]

Subscribed!

[@rameshxml]

Thank you for this but my out put is not coming if i click the button it will show the c: drive can you pls suggest

[@JsAcademyOfficial]

Feel feee to check the source code in the description, there must be a typo in your code

[@chukwuebukaobiajulu2849]

Don't know if you found a solution yet, but in your HTML, your form tag, just delete everything else in there and use only id="id name"

[@ishaanapte6570]

thanks😀

[@youtubepv]

Thnks😊

[@Aut-O-Mizer]

How did you space out the text boxes without using any margin settings

[@fidelisitor8953]

the spacing was added from the height of the .error div

[@Aut-O-Mizer]

@@fidelisitor8953 Thanks bro

[@boky7731]

Hey, so how to stop preventDefault() from executing if the inputs are valid?

[@north4220]

did you find a solution please .?

[@mahinpatel8024]

if (document.querySelectorAll('.success').length === 4) {
// submit the form
form.submit();
}
// You can submit the form if all the inputs are valid by adding a line of code after the validation checks inside the validateInputs function.

[@narikodanhridul2845]

form.addEventListener('submit', (e) =>{
var flag = 1;
if(name.value === ''){setError(name, "Username is required"); flag=0;
}else{setSucces(name)}
if(email.value === ''){setError(email, "email is required"); flag=0;
}else{setSucces(email)}
if(password.value === ''){setError(password, "Password is required"); flag=0;
}else if(password.value.length < 8){setError(password, "Password must be atleast 8 charecter"); flag=0;
}else{setSucces(password)}
if(password2.value === ''){setError(password2, "Please confirm password"); flag=0;
}else if(password.value != password2.value){setError(password2, "Password should be same"); flag=0;
}else{setSucces(password2)}
if(flag === 0){ e.preventDefault(); }
})

[@MichaelWarmer]

how do i remove e.preventDefault() after validation so it move to the next page... thank you

[@JsAcademyOfficial]

I’m planning to release a tutorial about it soon, you have some options in the form you can set the action which accepts a url and then you need to have a backend configured to handle the data from your form

[@realitystevens]

The form will not submit until you add the submit functionality below the validateInputs(); function.

[@Itsamoudim]

you mean the validateInputs(); bellow the submit functionality

[@uhk2150]

How to solve this issue..

[@north4220]

@@uhk2150 did you solve it please ?

[@mihrettekalgn9492]

Just put the 'defer' key word in the script tag that will solve the problem

[@sarat4695]

@@mihrettekalgn9492 can you please explain to me where to put it specific

[@AP_Singh]

how does the script know when every input is validated and its time to stop preventing the default action of 'submit' ??

[@chrischti]

Don't use the prevent submit function in the java script, instead run the function from the form, by adding onsubmit="return validateForm()", by that the form will be submitted if the function returns true

[@sanjeetlal1873]

@@chrischti works!! Thank you perfect

[@casesensitive9744]

I found the solution. submit() is a method. It will just eleminate preventDefault and just submit the form.

[@madebytl]

Hi, there how can we do with onClick(); when button have clicked?

[@bzoxx]

I know it's been 2 months but...
You just assign the attribute
Onclick = yourfunc()

[@madebytl]

@@bzoxx Thank! but what if we didn't fill the form already and then click on button.

[@rodynamuhammadgalal8382]

what about when validating radio buttons and dropdown lists?

[@kevinrwema9669]

you don't need to worry about validating radio buttons ant select list. users can only select from the options you've predefined upon creating

[@Raj-iz9uz]

Superb 🔥
need JavaScript Crash Course 🙏🏻😊
pls cover the JS Topic's required to Start with React or Angular 👍

[@JsAcademyOfficial]

Thanks for the feedback!
It would be great to create a crash course, unfortunalely I don’t have time to create it now (this year), but it is definetely on my list now.

[@ariyansgroup]

We are waiting for it..

[@nelmarkjhonduarte4040]

can you make tutorial this form validation with firebase, it will be so helpful to others if make that :(

[@louizamariakonizari2022]

Could you please help me to understand my mistake? I have the following code:

dokimastiko



and this is my js code
let y = getElementById('onoma').value;
and it gives me a reference error getelementbyid("onoma").value; is not defined.
What am I doing wrong? Thank you.

[@chrischti]

Correct is: let y = document.getElementById('onoma').value

[@AP_Singh]

I am using javascript function to submit form data. So, how can call it only after validating inputs?

[@sankalpsingh9386]

Yes we want to know ?

[@ernesto8273]

All went well. Please what do I need to do if I want to add an icon on the error validation?

[@voldy9918]

Hi, do u finally got this?? explain me pls!

[@duypkthg592]

Nice🥰

[@gracefool1786]

why have a validation form tutorial where the submit button doesnt work T.T

[@realitystevens]

The form will not submit until you add the submit functionality below the validateInputs(); function.

[@alexanderjackson7815]

@@realitystevens Okay, but what if your using php for the backend and want to actually submit for it to work, I guess its better to use something else

[@Duckergg.j]

It doesn't work when I submit with the button 👎

[@adeshinamubarak5689]

The codes are not working

[@kahlschlag17]

querySelectro('.error)'; ....why the dot?

[@JsAcademyOfficial]

It mean that the error is a Html class

[@kahlschlag17]

@@JsAcademyOfficial thanks mate.

[@chiennguyen4652]

Where is source code?

[@MAjay-qh1xd]

Nice

[@JsAcademyOfficial]

Thank you! 😊

[@saiyannaingx6416]

After validating and theres no error but the submit button not working anymore. how do i fix this

[@lailaayman1040]

i want to know how too

[@chrischti]

Don't use the prevent submit function in the java script, instead run the function from the form, by adding onsubmit="return validateForm()", by that the form will be submitted if the function returns true

[@sankalpsingh9386]

@@chrischti this not working

[@njmust]

how to submit if validations are true....

[@khensanimatjokana5843]

css part was a bit blury at the end but good video

[@polnapanda4934]

Godly

[@tienskz.official]

Basically, this method does not prevent the button from submitting a form even after the validation of all input controls.

[@casesensitive9744]

Yes. Please do you know how to override the preventDefault if all requirements is reached? .

[@narikodanhridul2845]

form.addEventListener('submit', (e) =>{
var flag = 1;
if(name.value === ''){setError(name, "Username is required"); flag=0;
}else{setSucces(name)}
if(email.value === ''){setError(email, "email is required"); flag=0;
}else{setSucces(email)}
if(password.value === ''){setError(password, "Password is required"); flag=0;
}else if(password.value.length < 8){setError(password, "Password must be atleast 8 charecter"); flag=0;
}else{setSucces(password)}
if(password2.value === ''){setError(password2, "Please confirm password"); flag=0;
}else if(password.value != password2.value){setError(password2, "Password should be same"); flag=0;
}else{setSucces(password2)}
if(flag === 0){ e.preventDefault(); }
})

[@bankoledada]

your website seems to be down - tried visiting and no joy. Great video

[@JsAcademyOfficial]

It should be up I’ve just tested it. Please try it like this: www.javascriptacademy.dev

[@victormuturi618]

Rien compris

[@erensancar4381]

does not work

[@johnerickmarzo7278]

Lesson from udemy

[@casesensitive9744]

This whole this is very blurry did he had to assign the valuateInputs to a variable bacause just the name can be a the name. 😄

[@kgamer5842]

i bet this fella is Hungarian

[@hexor8851]

gj

[@jianpatricio7196]

For validation purpose this video is informative, but when in comes to submission 👎 the guy did not give a tutorial on how to submit the form, which is the main purpose of form validation. The guy just focus on ui/ux validation output. So if you're beginner this tutorial is no good, especially if you want to submit the form.

[@JsAcademyOfficial]

I'll release a tutorial soon where I'll show you how you can submit the form and process it on the server-side (nodejs). Stay tuned.

[@sajiyasulthana4849]

😭😭

[@MarshGames]

bro you go so fast pls slow down for the newbies here

[@Dake6i]

Русскоговорящий что ли?

[@JsAcademyOfficial]

нет, I'm hungarian :)

[@Dake6i]

@@JsAcademyOfficial Madiyar?

[@JsAcademyOfficial]

Yes, magyar :)

[@Dake6i]

@@JsAcademyOfficial I'm Kazakh. Kazah vagyok:)

[@JsAcademyOfficial]

That’s a nice place, welcome abroad!

[@manojsunar192]

This is not for beginners for sure 😅😂

[@darlingfans8538]

Total code copy and paste worest class

[@lucianlsd3274]

For beginners my ass, i ve seen dozens of forms with js and this is not beginner level pffff BS

[@olga_lc]

Thanks a lot, that was useful!