Form validation using Javascript on the client side for beginners

Поділитися
Вставка
  • Опубліковано 28 лис 2024

КОМЕНТАРІ • 145

  • @vladropotica5687
    @vladropotica5687 Рік тому +4

    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
      @JsAcademyOfficial  Рік тому +1

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

  • @hishamrabea566
    @hishamrabea566 7 місяців тому +4

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

  • @zoirradjabov1420
    @zoirradjabov1420 Рік тому +10

    Simple and effective! That exactly what I needed

  • @MBXD001
    @MBXD001 8 місяців тому +1

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

  • @gorreon
    @gorreon 7 місяців тому +2

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

  • @shankysontakke3253
    @shankysontakke3253 3 роки тому +3

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

    • @JsAcademyOfficial
      @JsAcademyOfficial  3 роки тому +2

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

  • @IPlayWhatiLike
    @IPlayWhatiLike 2 роки тому +13

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

  • @sh9vch9nk0
    @sh9vch9nk0 8 місяців тому

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

  • @BBN-j6d
    @BBN-j6d 9 місяців тому

    Simple and understandable. Thanks

  • @evangelistaa.r.8242
    @evangelistaa.r.8242 2 роки тому +5

    Thank you for this tutorial it helped me a lot😊

  • @tonytony-fc6gq
    @tonytony-fc6gq 2 роки тому +2

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

  • @photoinshot1355
    @photoinshot1355 2 роки тому +5

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

  • @tienskz.official
    @tienskz.official Рік тому +1

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

    • @casesensitive9744
      @casesensitive9744 Рік тому

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

    • @narikodanhridul2845
      @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(); }
      })

  • @realitystevens
    @realitystevens 2 роки тому +29

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

    • @Itsamoudim
      @Itsamoudim 2 роки тому +3

      you mean the validateInputs(); bellow the submit functionality

    • @uhk2150
      @uhk2150 2 роки тому +1

      How to solve this issue..

    • @north4220
      @north4220 Рік тому +1

      @@uhk2150 did you solve it please ?

    • @mihrettekalgn9492
      @mihrettekalgn9492 Рік тому +5

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

    • @sarat4695
      @sarat4695 Рік тому

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

  • @wajry
    @wajry 2 роки тому

    Brief and helpful, thanks!

  • @Shalamandez
    @Shalamandez 2 роки тому +1

    Thanks for this video. So simplified

  • @janakiramanjohn4753
    @janakiramanjohn4753 Рік тому

    Great video bro,thank you very much

  • @OliaYarukhina
    @OliaYarukhina Рік тому

    Cool! Thank you so much!

  • @AP_Singh
    @AP_Singh 2 роки тому +5

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

    • @chrischti
      @chrischti 2 роки тому +9

      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
      @sanjeetlal1873 2 роки тому +1

      @@chrischti works!! Thank you perfect

    • @casesensitive9744
      @casesensitive9744 Рік тому

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

  • @christianjack1250
    @christianjack1250 5 місяців тому

    Great job

  • @MohamedAli-nn5ld
    @MohamedAli-nn5ld Рік тому

    Amazing video!

  • @guillermomazzari4983
    @guillermomazzari4983 2 роки тому

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

  • @visenyaa19
    @visenyaa19 Рік тому

    thank you so much for your great video

  • @viniciusm.m.7822
    @viniciusm.m.7822 Рік тому

    Wow
    Thanks, man!

  • @olga_lc
    @olga_lc 2 роки тому

    Thanks a lot, that was useful!

  • @alenachuyankova
    @alenachuyankova 3 місяці тому

    Thank you so much!!!!

  • @justrising4027
    @justrising4027 Рік тому +2

    Please can anyone help with making the form submit?

  • @philpok8416
    @philpok8416 4 дні тому

    this will not prevent submitting the form if something is not valid...

  • @HienTran-lo3jh
    @HienTran-lo3jh 7 місяців тому

    thank you bro thumbs up

  • @n0lame
    @n0lame Рік тому +2

    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
      @mahek9015 4 місяці тому

      event I need this! Did u find the solution?

  • @AkshaPatel-hy7qo
    @AkshaPatel-hy7qo 7 місяців тому

    Subscribed!

  • @boky7731
    @boky7731 2 роки тому +1

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

    • @north4220
      @north4220 Рік тому

      did you find a solution please .?

    • @mahinpatel8024
      @mahinpatel8024 Рік тому +5

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

  • @alwayshibu
    @alwayshibu 2 роки тому

    very helpful turorial.

  • @Blessed-d8r
    @Blessed-d8r 5 місяців тому

    How do you write the exponential symbol?

  • @m.j.mcintear793
    @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

  • @Raj_Vishwa1
    @Raj_Vishwa1 3 роки тому +5

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

    • @JsAcademyOfficial
      @JsAcademyOfficial  3 роки тому +6

      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
      @ariyansgroup 2 роки тому

      We are waiting for it..

  • @gracefool1786
    @gracefool1786 2 роки тому +2

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

    • @realitystevens
      @realitystevens 2 роки тому

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

    • @alexanderjackson7815
      @alexanderjackson7815 Рік тому +1

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

  • @rameshxml
    @rameshxml 2 роки тому +1

    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
      @JsAcademyOfficial  2 роки тому

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

    • @chukwuebukaobiajulu2849
      @chukwuebukaobiajulu2849 2 роки тому

      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"

  • @zachfenton608
    @zachfenton608 2 роки тому +1

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

  • @NafiadAbdi
    @NafiadAbdi 9 місяців тому

    Thank you so much.....

  • @Demon_T8_
    @Demon_T8_ 6 місяців тому

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

  • @mikensonpierre2029
    @mikensonpierre2029 2 роки тому +1

    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?

  • @bankoledada
    @bankoledada Рік тому

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

    • @JsAcademyOfficial
      @JsAcademyOfficial  Рік тому

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

  • @madebytl
    @madebytl 2 роки тому +1

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

    • @bzoxx
      @bzoxx 2 роки тому

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

    • @madebytl
      @madebytl 2 роки тому

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

  • @igraphicsalliance
    @igraphicsalliance 10 місяців тому

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

  • @hyllaf
    @hyllaf Рік тому

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

  • @ahmetbiba2489
    @ahmetbiba2489 2 роки тому

    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
      @JsAcademyOfficial  2 роки тому

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

  • @johnajil6379
    @johnajil6379 9 місяців тому

    Thank you

  • @MichaelWarmer
    @MichaelWarmer Рік тому

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

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

  • @louizamariakonizari2022
    @louizamariakonizari2022 2 роки тому +1

    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
      @chrischti 2 роки тому +3

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

  • @Duckergg.j
    @Duckergg.j Рік тому +1

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

  • @khensanimatjokana5843
    @khensanimatjokana5843 Рік тому

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

  • @ooooo5598
    @ooooo5598 2 роки тому

    how can i go to other page if i click

  • @rodynamuhammadgalal8382
    @rodynamuhammadgalal8382 Рік тому

    what about when validating radio buttons and dropdown lists?

    • @kevinrwema9669
      @kevinrwema9669 9 місяців тому

      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

  • @nelmarkjhonduarte4040
    @nelmarkjhonduarte4040 2 роки тому

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

  • @Aut-O-Mizer
    @Aut-O-Mizer 2 роки тому

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

    • @fidelisitor8953
      @fidelisitor8953 2 роки тому +1

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

    • @Aut-O-Mizer
      @Aut-O-Mizer 2 роки тому

      @@fidelisitor8953 Thanks bro

  • @jeo8007
    @jeo8007 Рік тому

    why i cant submit the form??

  • @web__designerr
    @web__designerr 2 роки тому

    how to redirect the next page

  • @MAjay-qh1xd
    @MAjay-qh1xd 3 роки тому +2

    Nice

  • @ishaanapte6570
    @ishaanapte6570 2 роки тому

    thanks😀

  • @amuga_1
    @amuga_1 Місяць тому

    INPUT OVERFLOW?
    fix: * { box-sizing: border-box; }

  • @youtubepv
    @youtubepv 2 роки тому

    Thnks😊

  • @chiennguyen4652
    @chiennguyen4652 6 місяців тому

    Where is source code?

  • @teklenegash6201
    @teklenegash6201 2 місяці тому

    the video has a lot to speak. But a little bit fast. I think it is designed for some one who has little experience on html, CSS, and java script. They need a detailed explanation and thoroughly follow-up.

  • @duypkthg592
    @duypkthg592 Рік тому

    Nice🥰

  • @AP_Singh
    @AP_Singh 2 роки тому

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

  • @MarkoVucicevic
    @MarkoVucicevic 3 місяці тому +1

    How to remove preventDefault after everything is validated? Form can't be submitted. Without that this tutorial is useless :)

  • @JsAcademyOfficial
    @JsAcademyOfficial  Рік тому

    New web development tutorial from me: Memory card game using Javascript, HTML, and CSS: 🔥
    ua-cam.com/video/xWdkt6KSirw/v-deo.html

  • @johnerickmarzo7278
    @johnerickmarzo7278 2 роки тому

    Lesson from udemy

  • @kahlschlag17
    @kahlschlag17 2 роки тому

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

  • @ernesto8273
    @ernesto8273 2 роки тому

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

    • @voldy9918
      @voldy9918 Рік тому

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

  • @jianpatricio7196
    @jianpatricio7196 Рік тому +1

    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
      @JsAcademyOfficial  Рік тому +2

      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.

  • @polnapanda4934
    @polnapanda4934 Рік тому

    Godly

  • @saiyannaingx6416
    @saiyannaingx6416 2 роки тому

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

    • @lailaayman1040
      @lailaayman1040 2 роки тому

      i want to know how too

    • @chrischti
      @chrischti 2 роки тому +1

      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
      @sankalpsingh9386 2 роки тому

      @@chrischti this not working

    • @njmust
      @njmust 2 роки тому

      how to submit if validations are true....

  • @kgamer5842
    @kgamer5842 2 роки тому

    i bet this fella is Hungarian

  • @casesensitive9744
    @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. 😄

  • @erensancar4381
    @erensancar4381 Рік тому

    does not work

  • @victormuturi618
    @victormuturi618 11 місяців тому

    Rien compris

  • @MarshGames
    @MarshGames 2 роки тому

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

  • @craigsummits
    @craigsummits Місяць тому

    not trying to be rude but this doesnt help me at all as a beginner

  • @hexor8851
    @hexor8851 2 роки тому

    gj

  • @sajiyasulthana4849
    @sajiyasulthana4849 2 роки тому

    😭😭

  • @Dake6i
    @Dake6i 3 роки тому +1

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

  • @manojsunar192
    @manojsunar192 Рік тому

    This is not for beginners for sure 😅😂

  • @lucianlsd3274
    @lucianlsd3274 Рік тому

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

  • @darlingfans8538
    @darlingfans8538 Рік тому

    Total code copy and paste worest class