BEST Ways to Handle and Validate React Forms without a Library

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

КОМЕНТАРІ • 306

  • @kashmirtechtv2948
    @kashmirtechtv2948 3 роки тому +44

    The best thing about Lama is that he tells all the possible methods amd then suggests us the best method and that's what most of the channels lack. They force their own methods on viewers Infact those methods are much difficult and outdated. But Lama makes everything easy and useful. 👍👍👍

  • @adebisisheriff159
    @adebisisheriff159 2 роки тому +6

    I fell in love with Lama Dev channel because, we focus on real world project. No copy and paste... All code from scratch with step by step explanation. I do not even know how to thank you for the awesome job you doing for us. I BIG THANK YOU TO YOU LAMADEV and I self-congratulatory message to me for stumble into your channel

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

    Validation starts at 24:24 Great video! Thanks Lama

  • @Jimmy-zt5io
    @Jimmy-zt5io 2 роки тому +7

    I have been learning React since January and I have never seen someone make a form like u did ! not to mention the way u handle the input validation and errors just with html and css ! that was impressive! Subscribed!

  • @zuzukouzina-original
    @zuzukouzina-original 2 роки тому +7

    You are one of the best tutors on UA-cam 💪🏼 You have the best examples that can be used in a real application.
    Thank you very very much, I mean it from the bottom of my heart ❤️

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

    I wanted to take a moment to express my sincere gratitude for the incredible tutorial you provided on React form creation and validation. Your clear explanations, step-by-step guidance, and practical examples made the learning process smooth and enjoyable.
    Thanks to your tutorial, I now have a much better understanding of how to leverage React's capabilities to create dynamic and user-friendly forms while ensuring data integrity through validation techniques. Your expertise and teaching style have truly empowered me to enhance my React skills and build more robust applications.
    I deeply appreciate the effort you put into creating such valuable content and sharing your knowledge with the community. Your dedication to helping others learn is truly commendable, and I'm grateful to have stumbled upon your tutorial.
    Once again, thank you for your outstanding contribution to the React developer community. I look forward to exploring more of your tutorials and continuing to expand my knowledge under your guidance.
    More I use this opportunity to request that you add selection options to the form and checkbox, radio etc

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

    Undoubtedly by far one of the best react forms tutorials for free.

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

    I've just come across your channel and I'm so excited to work through each example you have! Really appreciate the fact that you write everything from scratch so we can see the full picture!

  • @VladimirMitrofanovph
    @VladimirMitrofanovph 2 роки тому +20

    Thanks man! That's one of the best tutorials on React forms I've encountered so far. Very clear and I've learned a lot from these 42 minutes. Incredibly good job

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

    You got a new subscriber. Now in my todo list I have written down to watch atleast one video from your channel each day. Keep making more project videos ❤️🔥🙌

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

    Your contents are so easy to understand, and you provide a lot of topics and features in a single video. I am truly grateful to have come across your channel. Thank you for your hard work.

  • @betajohn-c6r
    @betajohn-c6r Рік тому

    Been coding in js for 6 months and just now I learned that clg trick LOL
    Appreciate it.

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

    I used hate react but when I found your channel I started loving it so thankyou. currently I'm following you social media app series it's ammazing man thanks for this amazing knowledge for free I'm going buy you so many coffee wjen i'll resume my freelance career my god will always bless you.

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

    This lesson is concise for beginners. I always like having the options devoid of libraries and dependencies. Thank you

  • @psyferinc.3573
    @psyferinc.3573 Рік тому

    i cant state enough how you are the best at opening our eyes to the basics

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

    Just this morning I was searching for form validation tuts on UA-cam and now this. Just right in time. Thanks, man

  • @ferdinandeke9590
    @ferdinandeke9590 3 роки тому +4

    This is amazing, I was gonna ask this question on form validations and the best way to do it and how we could use CSS to make sure certain characters only are inputted .. You're really a guardian angel as well Lama as regards coding.. cos you look out for us even where we may not really look out on.. thanks .. you're deeply appreciated..

  • @saumya7747
    @saumya7747 4 місяці тому

    Nice, thanks for the explaination. I appreciate you telling all possible ways and then showing the correct and/or optimised way of doing things.

  • @mehrdad.sabori
    @mehrdad.sabori Рік тому +1

    خیلی عالی بود دمت گرم من که ایرانی هستم با توضیحات خوبت خیلی خوب فهمیدم مرسی بابت زحماتت

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

    First time on your UA-cam channel, and I must say, your coding tutorials are very easy to understand. Thanks, bro!

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

    this is the best React tutorial ever

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

    My man! This is awesome! I have been looking for this as i don't like having so many library's and i didn't realize it was this simple! Thank you very much! Now to figure out on validation on the back end and learn bycrypt!

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

    Great job, love this Masterclass. To add a cherry on top of the cake, please make another video on how to handle dynamic errors

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

    Thx Lama! The native solution that you have shown me is fantastic. You're a rock star. I'll be checking back for more tutorials for sure.

  • @xavier-wz4on
    @xavier-wz4on 2 роки тому

    Thanks a lot👍 !

  • @lilmeat-xj7ru
    @lilmeat-xj7ru 2 роки тому

    Great tutorial I have been spending lots of time on creating forms in React and this helped me very much thank you!!!!!

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

    Thank you! I really improved my code after i watched your video - immideatly made a refractor and it looks much cleaner, and i also can reuse my components better now. Thanks again, expaining was very clear

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

    Wow, this teaching style is art!💯

  • @subramanyam.d24m56
    @subramanyam.d24m56 2 роки тому +1

    Thanks a lot for explaining how to place input elements in array of objects.

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

    This is just an amazing tutorial that I keep revisting from times to times. Thank you very much!

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

    I am bigginer in react .it very usefull your tutorial .You are improve my Life

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

    This is really great and amazing. Your tutorials are excellent and simple to understand. Keep on the great work! You're a good teacher.

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

    Best form creation 🔥 and validation video on the UA-cam

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

    This is really great but the problem is ,the html attributes can be edited in the inspect section and we can override the pattern and thus allowing to send irrelevent data in the form..really its great brother

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

    the best validation tutorial ever !!! Agzina saglik baskan

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

    Great explanations. The various methods explained are super good. Thanks for this tutorial. I am sure subscribing

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

    Validating form using the data from backend, that will be a good thing to learn.. waiting for that video

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

    This is great. Most useful, practical, real-world usage. Thanks!

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

    This is the best channel. Thanks a million abi!

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

    Cool React form handling. Thank you

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

    Wow I was really struggling to do validation stuff on my job projects and always used to was some new tutorials but i was never statisfied with the solution!
    Now i wont be getting frustrated again again Thank you so much Lama 💙💙💙💙💙

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

    Another great video Lama. You are just awesome. Keep up the good work

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

    Hi Sir, You are really awesome. Keep teaching us. Lot of love from Bangladesh.

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

    So well explained! Good job, Lama Dev! Thank you!

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

    This is so beautiful code am crying

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

    Thanks Lama, It is very easy to follow. Continue to build more.

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

      Hello, need some help.
      In onChange function, coma is used after ...values which is giving the parsing error.
      How to fix that? Any idea?

  • @vaishnavia.n.312
    @vaishnavia.n.312 2 роки тому

    Amazing video, I did not know about the pattern attribute and have learned much from you,Thank u Lama.

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

    Thank you so much for these awesome projects and tutorials

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

    Thanks so much, im building a quiz-forms app and this video helped me to improve my code!

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

    You are just a incredible man! Thank you for your contributions.

  • @Artem-u5e9c
    @Artem-u5e9c 2 роки тому

    Many thanks, Lama! It's awesome and clean way!

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

    Thanks for the new content, really appreciate it - I will surely subscribe to you for a few months after I change careers; which is very soon and you've helped it with the react stuff. thanks bro, you've made a difference - to quite a few people's lives. I'll show you the project when its done

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

    Safak thank for this brilliant react forms tutorial much appreciated💯

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

    You are a legend we need more n more

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

    Another amazing learning path for me. Thanks lama.

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

    Hello Lama Dev, Take love from deep heart. I love you.

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

    Always releasing nice and amazing tutorial😀
    You really change my life sir

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

    Excellent example and very well explained..
    Greate job... ❤️

  • @fw-ho7si
    @fw-ho7si 3 роки тому

    Thank you so much for this! Love all of your tutorials. So helpful! 💜

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

    Thanks for this! Really clear explanations! 🙌

  • @m.waseem6616
    @m.waseem6616 Рік тому

    The tutorial was absolutely stunning. Please make a video on context api as well.
    Thanks.

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

    Really Helpful Sir. Code is really easy to understand. Thank You

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

    i just found a new React teacher

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

    This is so amazing ❤️ NOW i realise how dull we are 😬
    Thanks a lot fot this amazing outstanding tutorial. Best wishesh from my heart ❤️

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

    Learning so much from you man🙌

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

    6:22 i never even thought to pass the set function via props like that 😅 Thanks

  • @peteplays604
    @peteplays604 3 роки тому +7

    Great video!
    What should the behavior be on submit? How do we ensure the form is validated before clearing it, redirecting, etc.?

  • @Lee-rd4cs
    @Lee-rd4cs 2 роки тому

    This is exactly what I wanted! thank you so much

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

    Eline sağlık kardeşim, çok yardımcı oldun gerçekten. Yeni şeyler öğrendim sayende :)

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

    Very clean code. Thank you for this. Subscribed.

  • @WillSmith-qt7me
    @WillSmith-qt7me 2 роки тому

    Great video for the forms. Thanks!

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

    Love it mate , you are other level!

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

    so neat and clean tutorial

  • @MdHasanAli-rb8no
    @MdHasanAli-rb8no 8 місяців тому

    An awesome video, I appreciate your approach.

  • @SohailKhan-gu2du
    @SohailKhan-gu2du Рік тому

    thanks man, need more videos from you

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

    Thankyou so much Lama sir, it is very useful and really enjoyed it.🙂🙂

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

    Thank you very much, I mean it from the bottom of my heart ❤ and it is a very practical example

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

    What a awesome tutorial! Thanks a lot.

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

    How does 'focused' became a property of an input element in react in the 36:01 of the video

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

      I wonder the same thing.... I dont understand, sadly...

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

      There is something wrong, typescript doesn't accept focused property

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

    Lama dev, You are amazing man....!!

  • @SamKing-i6e
    @SamKing-i6e Рік тому

    Please correct me if i'm wrong Lama.
    The onFocus function is actually redundant. If an input field has a required and pattern attribute, the form will not submit to the server if the pattern attribute is not met.
    Apart from that, love using this form, great video and bravo!

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

    Wow i didnt know that its that easy. And didnt know form data. So cool. Thank you

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

    This is neat!
    Just one idea. I did this in App.jsx:
    const inputs = [
    {
    //...
    validateOn: "blur", // or "focus"
    },
    And then in InputElement.jsx:
    const handleFocusChange = (e) => {
    if (e.type === validateOn) setFocused(true);
    };
    and

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

    This is so amazing I like the way you teach 😊😊😊

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

    lama is the best , I love your video man

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

    Very good Tutorial, very well explained thanks very much...!

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

    Awesome! Thank you mate!

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

    Thanks! Really great lesson! But how can we handle radio and select inputs with array?

  • @이시영-c7t
    @이시영-c7t Рік тому

    Thank you so much:D It's very helpful for me to learn it!

  • @SagorKhan-zk4ix
    @SagorKhan-zk4ix 2 роки тому

    Thanks lama, for this nice tutorial

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

    thanks a lot mate! That was so helpful!

  • @viniciusm.m.7822
    @viniciusm.m.7822 3 роки тому +1

    Thanks!!!!
    God bless you!

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

    incredible buddy, thank you so much :)

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

    Nice tutorials. I like them, they are well explained

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

    Thanks man, I've leared a lot.

  • @SathishKumar-rz5nl
    @SathishKumar-rz5nl 2 роки тому

    This is amazing...please make more dynamic projects

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

    I have a suggestion for this video, You should use data-focued insted of focused because it is not a standard attribute of the html element. You will find issues with it if you are using typescript in that case you will have to extend jsx types.

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

    Hey Lama - what shortcut are you pressing to select multiple lines? ( like in 15:20 )

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

      ​@Axel Zoldyck how to remove parsing error that occurs in onChange function due to comma after ...value?

    • @Qasimyousaf-zw5kw
      @Qasimyousaf-zw5kw Рік тому

      Alt+Shift+Areowdown

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

    This is a great example thank you❤

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

    Thanks for providing this video learned a lot