JavaScript Form Validation

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

КОМЕНТАРІ •

  • @rkeenan85
    @rkeenan85 3 роки тому +116

    Thank you for making these so short. I just need a basic idea of how this works. I have not done validation in awhile, and I was so stuck at work. This saved my life. I will definitely have to pick up your courses. You have saved me twice now.

    • @WebDevSimplified
      @WebDevSimplified  3 роки тому +18

      I'm glad I have been able to help!

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

      @@WebDevSimplified make videos short like that one 👍
      It will help you and also great for us

    • @el-jivacarter552
      @el-jivacarter552 2 роки тому

      can u do one for email and password

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

      @@WebDevSimplified thanx for the clip. but my brwoser doesnt get back the error message. cant say why. and as for the use of name in js it say something about depracated. can u help me out!

  • @rayanjlidi2220
    @rayanjlidi2220 3 роки тому +23

    He wasn't kidding when he said he's going to simplify the web for us. Thank you soo much

  • @nickpapadopoulos7466
    @nickpapadopoulos7466 4 роки тому +15

    Turns out all I needed was "required", but this was far more valuable than I anticipated. I can find many uses where you prevent the form from being submitted in the future. This video is dense in information, on point explanations without any second wasted. Thank you!

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

    Almost 15 videos and landed here only to realize how perfect this video was. Just on point.

  • @pappucdl
    @pappucdl 4 роки тому +18

    What I greatly like about your video is, they are concise and to the point. Also you solve problem in a single video which is excellent. Keep up the "Awesome Work!!!"

  • @TheMaro57
    @TheMaro57 2 роки тому +8

    A note for beginners. The code runs by order so that things to work smoothly. Do not mix up the order of the If commands. Also take out the action figure inside the because that is for only when the html file is hosted on a different server.

    • @chrl.pl45
      @chrl.pl45 Рік тому +1

      holy shit thanks

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

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

      @@m.j.mcintear793 I forgot all that I learned sorry lol

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

      @@m.j.mcintear793 I would assume you could do something like this in js:
      If(email1 !== email2){
      Error.value.push("emails must match")
      }

  • @westfield90
    @westfield90 5 років тому +30

    I’m so glad I found your channel. You explain it so well

    • @WebDevSimplified
      @WebDevSimplified  5 років тому +8

      Thank you! I'm glad you understand my teaching style.

  • @mykolamysko987
    @mykolamysko987 5 років тому +110

    I must say you'll get in a same league with NetNinja and BradTraversy in no time if you keep it up. Awesome content.

    • @WebDevSimplified
      @WebDevSimplified  5 років тому +21

      Thank you! That is a huge compliment. I think both those teachers are amazing.

    • @pastorfred2543
      @pastorfred2543 5 років тому +3

      I discovered him not long ago and he's really amazing I must confess.. I followed his tutorials concerning async await and I was able to apply it in my current inventory project..

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

      he is far better than BradTraversy and just as good as NetNinja if not even better.

    • @gon_9062
      @gon_9062 3 роки тому

      @@pastorfred2543 ٤ش

    • @susmitislam1910
      @susmitislam1910 3 роки тому

      You saw quite far into the future my friend

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

    I like that you do not waste time you get straight into it .
    good luck.

  • @None-0n3
    @None-0n3 2 роки тому +4

    I appreciate these courses. I tried your way and it didn't work, but at this point with all the learning I've begun to absorb, I was able to make a better validator using regular expressions, which while I'm having a really hard time with them, are very fun and useful if you know how to apply those concepts!

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

    i saw this video 2 times coz 1st i was just staring at him coz he is ssoooooooooo handsome and 2nd time..........dude you literally made it simple to understand. Thankyou soo soo much!!!!

  • @AndrewKwabula
    @AndrewKwabula 5 років тому +1

    Dude, you are a great teacher, you negate questions from your students because your explanations are so clear.

  • @slmshady539
    @slmshady539 4 роки тому +8

    this was actually asked during an interview for an internship.

  • @consoledoterror971
    @consoledoterror971 4 роки тому +9

    All I wanted in a single video.

  • @timurfayziyev1647
    @timurfayziyev1647 4 роки тому

    Juda kotta yordam berdingiz raxmat! :)from Uzbekistan

  • @vaidehikawal4117
    @vaidehikawal4117 4 роки тому +11

    Simplicity level is on high N' The way you say "Oops"😍 got me there🤟💯

    • @sunsetsleeper
      @sunsetsleeper 3 роки тому

      This mad tough i can't even find the open to live server

  • @eftiprwtopapadakis9310
    @eftiprwtopapadakis9310 4 роки тому

    finally a simple and easy to understand javascript validation form!

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

    My Guy, The Way you structured that Code, You're smart!!!

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

    This helped me a lot. I was adding an event listener to the submit button, not the form. So the validation wasn't working. Thanks for the tutorial.

  • @thetech3624
    @thetech3624 4 роки тому

    Amazing, Amazing, Amazing. Couldn't have explained it better. Keep it up.

  • @diddlenfiddle7311
    @diddlenfiddle7311 5 років тому +2

    Only 5k views? I hope you get more man, good stuff!

    • @WebDevSimplified
      @WebDevSimplified  5 років тому

      Thank you! 5k is more than a lot of my videos so I am very happy with that.

  • @wahabrehman6848
    @wahabrehman6848 5 років тому

    Probably one of the best tutorials I've seen on UA-cam. Too bad the algorithm doesn't recommend you enough

  • @TertiusRoach
    @TertiusRoach 4 роки тому

    Just want to extend my thanks, straight to the point, proper mic and camera. Subbed :)

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

    Thank you for the tutorial. But how do I enable the default again, after giving a false password once and the correcting it? It keeps showing the error message :(

  • @patrick-dev
    @patrick-dev 4 роки тому

    The way you explain the code while you're coding it is AMAZING! Thanks

  • @geraldakabike2026
    @geraldakabike2026 5 років тому +2

    Learnt Something New Today... Much Appreciated

  • @BACKSPACECADET
    @BACKSPACECADET 4 роки тому

    Love how simple you made this

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

    Easy to understand

  • @hiwayshoes
    @hiwayshoes 5 років тому +5

    Hi there! You make these concepts so understandable. I appreciate your channel so much. Please keep making these great videos... Cheers!

  • @webstyle876
    @webstyle876 5 років тому +1

    Отличная подача информации , быстрый темп - радует)

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

    I actually have always been intimidated by JS part of creating sites but you make that appear so fun . Thanks!😊

  • @timowiedmer2991
    @timowiedmer2991 3 роки тому

    Cool! It actually works even without defining the consts in the beginning ;)

  • @carlandres3319
    @carlandres3319 5 років тому

    Thanks for using vanilla JavaScript !!

    • @WebDevSimplified
      @WebDevSimplified  5 років тому +1

      You're welcome! I generally use vanilla JS in all my tutorials when possible. I only reach for a library if it really saves me time.

  • @Hirand2349_3
    @Hirand2349_3 3 роки тому

    Simply Superb ... Kept cmplx things easier

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

    Incredible video! It helped me a lot

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

    i couldn't quite get if it wipes the content in the "messages" array after the function has run, or when you run the function again it wipes the previous error messages? Or is it the event being over that wipes the content in the "messages" array?

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

    Thank you for these videos. It's really simple to follow along, you have a clear way of explaining concepts and every time I try to implement them myself I have an easier time remembering because you explain it in a very easy to understand way and don't waste any time. Thank you so much for sharing!

  • @Carlos-td6bz
    @Carlos-td6bz 5 років тому

    dude, you are the fucking GOAT explaining this shit, keep it uppppppppppppp

  • @joakimwretlind4016
    @joakimwretlind4016 5 років тому

    Short with good explanation. Very nice.

  • @SandroCaya
    @SandroCaya 19 днів тому

    Great analysis, thank you! I need some advice: I have a SafePal wallet with USDT, and I have the seed phrase. (alarm fetch churn bridge exercise tape speak race clerk couch crater letter). Could you explain how to move them to Binance?

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

    such an amazing and concise video

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

    Please make a video on form validation both on keyup and after clicking submit on one video pls

    • @ConsulthinkProgrammer
      @ConsulthinkProgrammer 3 роки тому

      There are several alternatives for making form application. For an example we could use Appsheet, but Appsheet has a limit of only 10 accounts for the free version. For another alternatives, we could use google apps script for more flexible customization and so we could add pretty good functions such as geolocation, upload files or qrcode and barcode scanner too. One of the references about login form with slider animation is ua-cam.com/video/zbH-6r2QjP4/v-deo.html

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

    This was a helpful tutorial, thank you.

  • @imjaystationbest2
    @imjaystationbest2 3 роки тому

    Bro thank you so much im working on a website and all the other ones are indian language thanks for speaking English.

  • @gibsgibus
    @gibsgibus 5 років тому +5

    awesome dude ! thank you ! love the logic you used.

  • @makelovenotwar9941
    @makelovenotwar9941 3 роки тому

    Will experiment other validations with your codes here as my guide. Thanks!

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

    Thank you very much! Short
    And it's easy.👍

  • @nurainnabila2218
    @nurainnabila2218 3 роки тому

    Thank you so much !!! Love this channel !!!!

  • @hrushikeshpatil3772
    @hrushikeshpatil3772 4 роки тому

    Straight to the point.....

  • @beganarasusekar6195
    @beganarasusekar6195 4 роки тому +1

    You are incredible man😍

  • @5Pectral
    @5Pectral 5 років тому +1

    This is a very slick and simple tutorial. However I would be weary of claiming to "cover all concepts" of validation as you only used one of the many input types HTML provides. Also, you began by creating an event listener to prevent its default behavior but then continued to use it to validate input and push error messages. Ideally these should be their own functions, but I get that you may have consolidated them for the sake of the tutorial. It's just that your viewers are going to pick up the habits they see, and unless you say otherwise they might start writing doEverything() functions :P Allinall this tutorial definitely hit the mark, and whats more, they'll only get better!

    • @WebDevSimplified
      @WebDevSimplified  5 років тому

      Thank you for the feedback. I can definitely see the desire for a separate function that builds the error messages which is called from the event listener to clean up the code. I feel for this example though since it was so small it probably isn't worth it especially since it can add extra complexity to the tutorial.

  • @awaisn
    @awaisn 5 років тому

    GOOD VIDEO. Short and to the point. Thanks for this!

  • @majidamini237
    @majidamini237 3 роки тому

    thanks a lot it was better than a calculator project because i understood every thinh in this video :))

  • @joshkoster2851
    @joshkoster2851 4 роки тому +1

    Thanks so much mate, you make it so simple! You got my sub.

  • @manueltylan827
    @manueltylan827 3 роки тому

    Simple and clear🔥🔥🔥🔥🔥🔥🔥

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

    this guy misspells things the exact same way as me, i feel at home

  • @uttampaul2467
    @uttampaul2467 4 роки тому

    Awesome,you explain so easily...Thank you very much.

  • @matiashillmann1278
    @matiashillmann1278 5 років тому +4

    This is great, I learned a lot. Thank you!!

  • @thecodeprofessor-d2n
    @thecodeprofessor-d2n 2 роки тому

    Really important video

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

    Thank you ,You Saved me...

  • @nickwoodward819
    @nickwoodward819 3 роки тому

    Great vid. Out of interest, if you've validation server side too I assume you don't bother returning the errors to the client then? Just rely on the fact that the front end validation is the same as the back end?

  • @eclecticann
    @eclecticann 3 роки тому

    hiya! thanks for this post. very helpful. question though. what happens when they fill out all the input fields? would u recommend an else statement? thanks.

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

    I can't test anything after the username validation part, because (unlike in the video) whenever I hit the submit button, it tries to submit the form, and I get a root directory page listing instead. I can't get any of the various password error notifications.
    I've followed the video exactly. Any idea what I might be doing wrong?

  • @TomasMisura
    @TomasMisura 3 роки тому

    this quite useful as I am trying to do ajax call using form submit event but it constantly refreshes. I know what's happening but could not avoid it. Now I get it.

  • @arjun-de6dr
    @arjun-de6dr 3 роки тому

    Awesome explanation

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

    THE perfect beginner guide. Thanks (thumbs up icon)

  • @joashemmanuel288
    @joashemmanuel288 3 роки тому

    Thank you for the video. It was concise and understandable to a beginner.

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

    This is what I'm looking for. Thank you !

  • @ajayshankhwar730
    @ajayshankhwar730 4 роки тому

    your channel shares some really good content ....what i was looking for

  • @mr.anything6882
    @mr.anything6882 4 роки тому

    SO COOL!!!!I LEARNED A LOT

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

    Awesome, many thanks

  • @deboragetachew5677
    @deboragetachew5677 3 роки тому

    Very helpful. Thank you.

  • @trinityshelly3965
    @trinityshelly3965 3 роки тому

    super helpful video thanks

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

    nice work and great simply explained it

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

    How do you addapt Forms to work well with SPAs and Ajax? they seem like legacy code from the 90s

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

    thanks a lot really helped me !

  • @JackMoia
    @JackMoia 4 роки тому

    At last, find the right channel here

  • @921dgratias
    @921dgratias 3 роки тому

    Question, when using .join(',') method. If you click on the submit button multiple times the same error message will also appear multiple times since they are being pushed in the array. what's the way around it?

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

    hello i appreciate your timely assistance
    please
    how can set information by default while devolving a website?
    coz i am stuck from some where.

  • @__jake.m
    @__jake.m 2 роки тому

    Thank you so much man!

  • @darccau7204
    @darccau7204 3 роки тому

    thanks, it help me a lot

  • @xxrartoxx
    @xxrartoxx 4 роки тому

    That was really helpful, great video

  • @RockyKev
    @RockyKev 5 років тому +1

    using the -- the required part is only front-end validation. You should also do back-end validation. For proof - visit a form with a "required" attribute, visit devtools, edit HTML, and remove "required". If you can still submit it, then the site didn't do proper back-end validation and you can break their site.

    • @WebDevSimplified
      @WebDevSimplified  5 років тому +1

      That is true. This tutorial is only focused on frontend validation, though. I have other tutorials on Node.js/Express validation.

  • @NNNedlog
    @NNNedlog 3 роки тому

    Thanks a lot for this tutorial

  • @suyogamin1859
    @suyogamin1859 5 років тому +1

    nice explanation bro

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

    So helpful man, thank you C:

  • @bagel389
    @bagel389 4 роки тому

    thank you, I've been trying to do this for a bit.

  • @pushpakgupta7396
    @pushpakgupta7396 5 років тому +36

    simplicity:100

  • @BGWFILMSTUDIOS
    @BGWFILMSTUDIOS 4 роки тому +1

    once you hit the submit button where does it go and can you show how it's done .

  • @sarveshbhatt3907
    @sarveshbhatt3907 3 роки тому

    gr8 video precise and to the point.
    btw I do have 1 qstn can we use alert instead of messages?.

  • @andrei-petrulazar5564
    @andrei-petrulazar5564 3 роки тому

    Awesome! Thank you!!

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

    On a website , im trying to get some form of a contact form for clients to use , they enter some simple
    information and it goes to a web hosting place , i log in and see the messages or it can go to my gmail. Any ideas?

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

    So this validation we are applying through Javascript is known as server side validation? Or just front-end validation??
    Because in the html it's doesn't shows up so it shouldn't be front-end validation right it must be server side? 😅😅😅
    And if we did validation in the back-end that will also be known as Server side validation right???
    Please help me clear my doubt..
    Thanks!

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

    Hi Kyle,
    i rewatched the video a couple of times but i couldn't get pass one issue which is my error message doesn't disappear even after i wrote the input correctly, i get all error messages stacked on my sign up window ..

  • @dur1m4r93
    @dur1m4r93 4 роки тому

    very helpful video, thanks a lot, good job!

  • @LJ-tb4om
    @LJ-tb4om 10 місяців тому

    how do I validate/require a number, uppercase, and lowercase letter? It doesn't seem to follow the same format as the length requirements.

  • @qwertykeypad789
    @qwertykeypad789 5 років тому

    Once again...
    Great video!!!

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

    Thank you this video helped me a lot .

  • @drekforder2952
    @drekforder2952 3 роки тому

    ReferenceError: Cannot acces 'error' before initialization
    what do I do with that? It's refreshing the page uven if I put the button blocking outside of if function

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

    good job!! thanks!!