JavaScript Form Validation

Поделиться
HTML-код
  • Опубликовано: 2 фев 2025

Комментарии • 377

  • @rkeenan85
    @rkeenan85 4 года назад +121

    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  4 года назад +19

      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 2 года назад

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

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

  • @rayanjlidi2220
    @rayanjlidi2220 4 года назад +25

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

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

  • @cineymatic
    @cineymatic 3 года назад +2

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

  • @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 лет назад +111

    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 4 года назад +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.

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

  • @consoledoterror971
    @consoledoterror971 4 года назад +9

    All I wanted in a single video.

  • @timurfayziyev1647
    @timurfayziyev1647 4 года назад

    Juda kotta yordam berdingiz raxmat! :)from Uzbekistan

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

  • @steveotieno8441
    @steveotieno8441 3 года назад +5

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

  • @vaishnavimithapalli9071
    @vaishnavimithapalli9071 4 года назад +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!!!!

  • @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")
      }

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

  • @sakalagamingyt3563
    @sakalagamingyt3563 3 месяца назад

    Incredible video! It helped me a lot

  • @thetech3624
    @thetech3624 4 года назад

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

  • @Breakfast_Time-r3c
    @Breakfast_Time-r3c 7 дней назад

    Making the messages as an array is so neat. Thanks

  • @TertiusRoach
    @TertiusRoach 4 года назад

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

  • @eftiprwtopapadakis9310
    @eftiprwtopapadakis9310 4 года назад

    finally a simple and easy to understand javascript validation form!

  • @oyelekekolawolejubril2128
    @oyelekekolawolejubril2128 25 дней назад

    I'm excited that I found your code

  • @slmshady539
    @slmshady539 4 года назад +8

    this was actually asked during an interview for an internship.

  • @beganarasusekar6195
    @beganarasusekar6195 4 года назад +1

    You are incredible man😍

  • @joshkoster2851
    @joshkoster2851 4 года назад +1

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

  • @mohamedelyeszormati
    @mohamedelyeszormati 2 года назад

    This was a helpful tutorial, thank you.

  • @degsewtegegne
    @degsewtegegne Год назад

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

  • @AndrewKwabula
    @AndrewKwabula 5 лет назад +1

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

  • @majidamini237
    @majidamini237 3 года назад

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

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

  • @Hirand2349_3
    @Hirand2349_3 3 года назад

    Simply Superb ... Kept cmplx things easier

  • @tkchamp5120
    @tkchamp5120 3 года назад +1

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

  • @gibsgibus
    @gibsgibus 5 лет назад +5

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

  • @geraldakabike2026
    @geraldakabike2026 5 лет назад +2

    Learnt Something New Today... Much Appreciated

  • @lefamofokeng8291
    @lefamofokeng8291 Год назад

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

  • @wr1099-c9p
    @wr1099-c9p 5 лет назад

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

  • @manueltylan827
    @manueltylan827 3 года назад

    Simple and clear🔥🔥🔥🔥🔥🔥🔥

  • @BACKSPACECADET
    @BACKSPACECADET 4 года назад

    Love how simple you made this

  • @Carlos-td6bz
    @Carlos-td6bz 5 лет назад

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

  • @shadon_official2510
    @shadon_official2510 2 года назад

    such an amazing and concise video

  • @timowiedmer2991
    @timowiedmer2991 3 года назад

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

  • @awaisn
    @awaisn 5 лет назад

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

  • @matiashillmann1278
    @matiashillmann1278 5 лет назад +4

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

  • @makelovenotwar9941
    @makelovenotwar9941 3 года назад

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

  • @webstyle876
    @webstyle876 5 лет назад +1

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

  • @uttampaul2467
    @uttampaul2467 4 года назад

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

  • @nurainnabila2218
    @nurainnabila2218 3 года назад

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

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

  • @ajayshankhwar730
    @ajayshankhwar730 4 года назад

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

  • @olamideolajuyi2311
    @olamideolajuyi2311 2 года назад +1

    Easy to understand

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

  • @xxrartoxx
    @xxrartoxx 4 года назад

    That was really helpful, great video

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

  • @TheMaster201989
    @TheMaster201989 Год назад

    nice work and great simply explained it

  • @joakimwretlind4016
    @joakimwretlind4016 5 лет назад

    Short with good explanation. Very nice.

  • @hrushikeshpatil3772
    @hrushikeshpatil3772 4 года назад

    Straight to the point.....

  • @OutMagic
    @OutMagic 2 года назад

    So helpful man, thank you C:

  • @joashemmanuel288
    @joashemmanuel288 3 года назад

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

  • @mr.anything6882
    @mr.anything6882 4 года назад

    SO COOL!!!!I LEARNED A LOT

  • @dur1m4r93
    @dur1m4r93 4 года назад

    very helpful video, thanks a lot, good job!

  • @arjun-de6dr
    @arjun-de6dr 3 года назад

    Awesome explanation

  • @htmlcssjavascriptjqueryphp5855
    @htmlcssjavascriptjqueryphp5855 3 года назад

    thanks a lot really helped me !

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

  • @muhammedshafeeralip4178
    @muhammedshafeeralip4178 2 года назад

    Thank you ,You Saved me...

  • @deboragetachew5677
    @deboragetachew5677 3 года назад

    Very helpful. Thank you.

  • @NNNedlog
    @NNNedlog 3 года назад

    Thanks a lot for this tutorial

  • @randy7894
    @randy7894 2 года назад

    THE perfect beginner guide. Thanks (thumbs up icon)

  • @__jake.m
    @__jake.m 2 года назад

    Thank you so much man!

  • @patrick-dev
    @patrick-dev 4 года назад

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

  • @darccau7204
    @darccau7204 3 года назад

    thanks, it help me a lot

  • @oliveroshea5765
    @oliveroshea5765 Год назад

    Awesome, many thanks

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

  • @jayamali1422
    @jayamali1422 2 года назад

    Thank you this video helped me a lot .

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

  • @bagel389
    @bagel389 4 года назад

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

  • @thecodeprofessor-d2n
    @thecodeprofessor-d2n 2 года назад

    Really important video

  • @paulpancake
    @paulpancake 2 года назад

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

  • @trinityshelly3965
    @trinityshelly3965 3 года назад

    super helpful video thanks

  • @MultiMunja
    @MultiMunja 2 года назад

    You are great. You make sshort videos and I love them. Just speak little bit slower because most of us is learning and if Your video is one minute longer it would be better :D. But that is just my opinion. But You are still great

  • @andrei-petrulazar5564
    @andrei-petrulazar5564 3 года назад

    Awesome! Thank you!!

  • @qwertykeypad789
    @qwertykeypad789 5 лет назад

    Once again...
    Great video!!!

  • @SandroCaya
    @SandroCaya 2 месяца назад

    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?

  • @JackMoia
    @JackMoia 4 года назад

    At last, find the right channel here

  • @splitlang
    @splitlang 5 лет назад

    Hi thank you I can not get away from the channel but because of work thanks

  • @devoided2
    @devoided2 5 лет назад +1

    omg this vid saved me
    thank you very much!

  • @suyogamin1859
    @suyogamin1859 5 лет назад +1

    nice explanation bro

  • @DaraMojibayo
    @DaraMojibayo 4 года назад

    Awesome video, good content and nice explanations. Do you have a JavaScript series video

  • @lgiardili
    @lgiardili Год назад

    good job!! thanks!!

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

  • @sarveshbhatt3907
    @sarveshbhatt3907 4 года назад

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

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

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

  • @integrateeverything
    @integrateeverything 4 года назад +1

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

    • @ConsulthinkProgrammer
      @ConsulthinkProgrammer 4 года назад

      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 ruclips.net/video/zbH-6r2QjP4/видео.html

  • @OhOk616
    @OhOk616 2 года назад

    Thanks for the help

  • @jalen.austin
    @jalen.austin 5 лет назад +1

    Thanks for this

  • @motorazr777
    @motorazr777 5 лет назад

    Hi buddy , all your videos are amazing, thanxs so much for doing this type of content.
    Would you mind if you might do a video about best practices of coding? Things as, which resources to study, and a Top languages to learn as a beginner. Thanxs a lot again !!!

    • @WebDevSimplified
      @WebDevSimplified  5 лет назад +1

      Thanks. I try to point out best practices in all of my project based videos when I come across them. I also have a few videos on how to study and best resources. They are in the top 10 and discussion playlists on my channel.

    • @motorazr777
      @motorazr777 5 лет назад

      @@WebDevSimplified Great, well, I'll check out your channel to watch that video. Thanks again .

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

  • @BhavinTrivedi-of4zs
    @BhavinTrivedi-of4zs 2 года назад

    Thank you so much 🥰

  • @toma1610
    @toma1610 3 года назад

    6:30 And is it possible to show a message that the form has been submitted successfully? within the client Side?

  • @xxapoloxx
    @xxapoloxx Год назад

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