React Formik Tutorial with Yup (React Form Validation)

แชร์
ฝัง
  • เผยแพร่เมื่อ 7 พ.ย. 2024

ความคิดเห็น • 170

  • @ChrisSimpson-f5t
    @ChrisSimpson-f5t 7 หลายเดือนก่อน +9

    Finally! I've been looking all over for someone I can understand! It seems like all of the other videos I find are by people who have really poor english, accents I can't understand, or audio quality I can't understand. Very helpful and well produced, thank you so much!

  • @apuemdad2125
    @apuemdad2125 ปีที่แล้ว +4

    When I searched for, your videos appeared at top. I first ignored your video because I thought the length was too short. But I didn't have that much time to spend to learn Formik. Finally, I decided to go through your video. The best thing is you provided starting files when many yt-ers don't even bother to put repo link in desc. Finally, your presentation is awesome. Thank you a lot!

    • @ekanshmishra4517
      @ekanshmishra4517 ปีที่แล้ว

      I felt exactly same right now as initially i thought it is too short for formik but i just tried it and miracle i understood and became a fan of this channel

  • @EricLowryUT
    @EricLowryUT 2 ปีที่แล้ว +20

    Nice comprehensive overview! Every time I come back to formik after a couple of months, I have to re-learn everything - this was a great help getting me back up to speed.

    • @nikita-dev
      @nikita-dev  2 ปีที่แล้ว

      thank you! I'm glad it was helpful!

  • @moroix
    @moroix 2 ปีที่แล้ว +25

    Going step by step and explaining it , is what set you apart from the rest , one of the best tutorials Keep up the good work

  • @maria-838
    @maria-838 ปีที่แล้ว +3

    It is so hard to find content like this. A true gem. Especially after going through tons and tons of information feeling more confused than in the beginning. Sometimes all you need to finally figure smth out - is a clear, calm, step-by-step video of how to make it like a pro) Thank you! 🤗

  • @solomonrajkumar5537
    @solomonrajkumar5537 ปีที่แล้ว +1

    out of many youtube tutorials on Formik and yup.... you the only one who taught in a very simplified way... hats of bro... thank you so much!!!!

  • @tenc6491
    @tenc6491 ปีที่แล้ว +2

    I came across your channel with the keyword, "React js Form validation" and I am so glad it brought me to your page. I truly applaud your teaching style which is concise, informative, easy to understand and extremely detailed. Thank you, mate! Happily subscribed to learn more from your channel.

  • @Hynasek
    @Hynasek 2 หลายเดือนก่อน

    I've been tiptoeing around Formik and Yup for a long time and your tutorial made it finally click for me. Awesome execution!

  • @lokendrachaulagain8510
    @lokendrachaulagain8510 2 ปีที่แล้ว +7

    Thanks ,you cleared my concept . Now easy-peasy..Your teaching style is very professional and you have excellent voice too..dont stop uploading videos..you have potential..39 subscriber remember its just a beginning

    • @nikita-dev
      @nikita-dev  2 ปีที่แล้ว

      thank you! I appreciate your encouragement!

  • @christabelhilary2167
    @christabelhilary2167 7 หลายเดือนก่อน +2

    I wish I can like this a million times! Thank you so much for simplifying this.

  • @judoScott
    @judoScott ปีที่แล้ว +1

    Thank you so much for this fantastic tutorial. I've use formik and yup before but from course whey they use it but dont' really explain it. This was so helpful!

  • @a大崎
    @a大崎 2 ปีที่แล้ว +4

    ありがとうございます!すごい勉強になりました!

  • @-Soren
    @-Soren 2 ปีที่แล้ว +3

    i love how you explain the starter code bro, i hope you make it big

  • @ranveerancharaz6732
    @ranveerancharaz6732 5 หลายเดือนก่อน +1

    Damn, still one of the best tutorials on that topic, would love to see one with real api involved.

  • @cretik_shmurda
    @cretik_shmurda ปีที่แล้ว +1

    This has changed my life Chief! All love to you.

  • @fernandomatich8787
    @fernandomatich8787 ปีที่แล้ว +1

    Thank you for such a detailed and understandable tutorial, from now on I will use this technique to create all my forms. All the best thanks again.

  • @christopherpink842
    @christopherpink842 2 ปีที่แล้ว +2

    👋👋👋👋👋👋👋👋 THANK YOU THANK YOU, all my questions have been answered, eg multiple error messages, resetting the form after submitting and checkboxes all in 35 minutes, SUBBED

    • @nikita-dev
      @nikita-dev  2 ปีที่แล้ว

      thank you! I appreciate your feedback!

  • @amrishpatidar2579
    @amrishpatidar2579 2 ปีที่แล้ว +2

    thankyou so much explaining it in very crystal and clear way

  • @thanirmalai
    @thanirmalai ปีที่แล้ว +2

    Thanks . Just got introduced to formik.

  • @harshrathi9938
    @harshrathi9938 2 ปีที่แล้ว +2

    You train so well! It's like you comprehend my tempo...

  • @nclsDesign
    @nclsDesign ปีที่แล้ว +1

    This tutorial taught me everything I needed in a comfortable pace with explainatioins. Earned a sub!

  • @stephanpaul8954
    @stephanpaul8954 2 ปีที่แล้ว +2

    Rockstarrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrr. I love you showed both the components and useFormik() !!! Also the schema was epic, never though of doing this and organzing like this.... Thanks a ton

  • @TheMaP142
    @TheMaP142 2 ปีที่แล้ว +3

    Thanks so much for your thoughtful and detailed videos! On to the soft!

  • @ark7852
    @ark7852 2 ปีที่แล้ว +2

    this program works great! exactly as I wanted

  • @sq5321
    @sq5321 2 ปีที่แล้ว +2

    so hard to find such good tutorials, thanks!

  • @kaiumi.yk3
    @kaiumi.yk3 2 ปีที่แล้ว +2

    ITS WORKING! nice job dude

  • @NIXO3D
    @NIXO3D 10 หลายเดือนก่อน +2

    Thank you so much for sharing 🍻 You made it so easy for me 🙏🏾

  • @movie4u833
    @movie4u833 2 ปีที่แล้ว +2

    U gotta make it look so easy, thx bro!

  • @filiplhotka217
    @filiplhotka217 2 ปีที่แล้ว +2

    What an angel! You save my broken head!

  • @shawazonfire
    @shawazonfire ปีที่แล้ว +1

    thank you for this, sir, people like you make a huge difference. the clarity of your instruction is incredible, and i highly appreciate you walking us through the process step-by-step.

    • @nikita-dev
      @nikita-dev  ปีที่แล้ว

      thanks so much! I’m glad it was helpful

  • @moonsikandar554
    @moonsikandar554 2 ปีที่แล้ว +2

    nobody has explained like, just fab.

  • @asksk525
    @asksk525 ปีที่แล้ว +1

    nice explanation. A lot of information in just one video... thanks

  • @marctofan824
    @marctofan824 2 ปีที่แล้ว +3

    Thanks a lot for a video!
    You did a very good job!
    Really very well and professionally explained.
    Was surprised by the small number of subscribers. subscribed
    Keep going
    Which of the two methods shown do you prefer? i like the first one

    • @nikita-dev
      @nikita-dev  ปีที่แล้ว

      Glad you liked it! I also prefer the first method

  • @Trolecs-ml2pc
    @Trolecs-ml2pc 2 ปีที่แล้ว +2

    Thanks dude...It helps alot especially on beginners like

  • @silentsvnstars
    @silentsvnstars 2 ปีที่แล้ว +2

    Thanks, it gave me the idea I was looking for

  • @JavierGonzalez-zp7bl
    @JavierGonzalez-zp7bl 2 ปีที่แล้ว +2

    understand the basics of the software untill now. Your guide is very very good quite simple and very helpful. I gave you a like and a sub

  • @lukks16
    @lukks16 2 ปีที่แล้ว +4

    What an Incredible tutorial! It really helped me a lot! Thank you!

  • @jritzeku
    @jritzeku ปีที่แล้ว +2

    Great tutorial! Btw is the useFormik hook approach limited when compared to using the components approach ? Going to eventually need form + validation for image uploads, some dropdown and checkbox and was wondering if useFormik should be sufficient for those cases.

    • @nikita-dev
      @nikita-dev  ปีที่แล้ว +1

      yes, useFormik() should be sufficient in those cases! Here is some more info on when to use useFormik() vs the Formik component: formik.org/docs/api/useFormik

  • @odogwu-1918
    @odogwu-1918 9 หลายเดือนก่อน +1

    I am enjoying your lessons so much, you teach well, combining it with the docs is so interesting, you should create a react course, if you have the time tho.

  • @serecode
    @serecode ปีที่แล้ว +2

    Best explanation. Thank you.

  • @sclassen
    @sclassen ปีที่แล้ว +2

    Very clear explanation of Formik. Thanks! I have followed your instructions and read up fairly extensively on the Formik website, but I can't for the life of me figure out how to forward on to a "success" page after the onSubmit function is successful. i.e.after receiving a 200 OK from the backend API. Do you have any advice?

    • @nikita-dev
      @nikita-dev  ปีที่แล้ว +2

      If you're using react router, you can call the "useNavigate" hook, which will return a function that you can call to programmatically navigate to a new page. Here is the documentation: reactrouter.com/en/main/hooks/use-navigate
      Then, you can initialize your onSubmit function by passing in the navigate function. So now it would become:
      const initializeOnSubmit = (navigate) => async (values, actions) => {
      try {
      await apiCall();
      navigate("/success");
      }
      catch{
      // handle error
      }
      }
      Then in the useFormik() config, you would do:
      onSubmit: initializeOnSubmit(navigate)

  • @bobdpa
    @bobdpa 2 ปีที่แล้ว +5

    Great video. And thank you for including a simple repo! 🙋‍♂

  • @huongnguyenxuan5558
    @huongnguyenxuan5558 2 ปีที่แล้ว +3

    Very helpful, and surprisingly therapeutic

  • @al_peterson
    @al_peterson 8 หลายเดือนก่อน +1

    Thanks mate! Really useful content! 👍🏻

  • @benna6906
    @benna6906 ปีที่แล้ว +1

    thanks man , u explained everything well

  • @elane2567
    @elane2567 ปีที่แล้ว +1

    Thank you for this awesome tutorial! very clear and concise, love it!!!

  • @hoseinshahi551
    @hoseinshahi551 2 ปีที่แล้ว +2

    Thank you So much for ur ti and support

  • @pablodiez9038
    @pablodiez9038 ปีที่แล้ว +2

    Great tutorial! Question? ... Can you repurpose the CostumInput for other fields or is it married to username?

    • @nikita-dev
      @nikita-dev  ปีที่แล้ว

      you can use it for any field you want. "username" was just an example

    • @pablodiez9038
      @pablodiez9038 ปีที่แล้ว

      @@nikita-dev Amazing !

    • @pablodiez9038
      @pablodiez9038 ปีที่แล้ว

      How would you go about grouping checkboxes? Let say we have several options we can check...
      Do you have a discord?

  • @just_veiw_minutes2189
    @just_veiw_minutes2189 2 ปีที่แล้ว +2

    Thanks man!! You've earned my respect

  • @landri2986
    @landri2986 8 หลายเดือนก่อน +1

    Thank you! This helped me!

  • @JaiminBorad
    @JaiminBorad ปีที่แล้ว +2

    awesome video with nice explanation

  • @bhaskarrau7141
    @bhaskarrau7141 11 หลายเดือนก่อน +1

    Awesom man. Thanks a lot

  • @nihadzeidan3806
    @nihadzeidan3806 ปีที่แล้ว +1

    Well done, simple and on the point.

  • @k.m.jiaulislamjibon1443
    @k.m.jiaulislamjibon1443 2 ปีที่แล้ว +2

    nice explanation... keep up the good work

  • @alexanderkomanov4151
    @alexanderkomanov4151 ปีที่แล้ว +2

    Great Content! Thanks!!!

  • @OmarDevelopments
    @OmarDevelopments ปีที่แล้ว +1

    Perfect explanation, thank you so much ❤❤❤❤

  • @zainjahangir296
    @zainjahangir296 ปีที่แล้ว +1

    u just got a new subscriber❤

  • @surajchanda7992
    @surajchanda7992 ปีที่แล้ว +2

    Thank you... Please make more videos, like mui...❤️

  • @Vape55
    @Vape55 11 หลายเดือนก่อน +1

    great lesson thank you.

  • @JinanI.Zahaika
    @JinanI.Zahaika 7 หลายเดือนก่อน +1

    Thank you very much. This was very useful

  • @sheraliandroidgames9728
    @sheraliandroidgames9728 2 ปีที่แล้ว +4

    Thank you so much, please make more tutorials like tNice tutorials. You explain better than any other guide I've seen on youtube, very clear and

  • @ShubhamSingh-w6f7n
    @ShubhamSingh-w6f7n ปีที่แล้ว +1

    Awesome tutorial! Only issue is that I can't get it working for Autocomplete component of MUI.

  • @yusufgul5514
    @yusufgul5514 2 ปีที่แล้ว +2

    your videos are sooo great i love it

  • @mahyarmansoorian1814
    @mahyarmansoorian1814 9 หลายเดือนก่อน +1

    Compact and accurate 👌

  • @hyuksukwon
    @hyuksukwon ปีที่แล้ว +2

    Thank u very much. very helpful.

  • @taunado
    @taunado ปีที่แล้ว +2

    Thanks, great tut. Please create content showing how to make apps in React. Eg. A delivery app that shares the delivery status. "1. Item in Warehouse 2. In transit 3. Received".

    • @taunado
      @taunado ปีที่แล้ว

      Eg. Pizza delivery app

    • @taunado
      @taunado ปีที่แล้ว

      I think there's a lack of these long-form app making React tuts. Most of them are generic duplicates of the same few apps.

    • @nikita-dev
      @nikita-dev  ปีที่แล้ว

      thank you for the feedback!

  • @silvanageorgioska9717
    @silvanageorgioska9717 10 หลายเดือนก่อน +1

    Excellent!!!

  • @nocturno7887
    @nocturno7887 2 ปีที่แล้ว +2

    Thanks! this was a nicely done tutorial

  • @tomi585_com7
    @tomi585_com7 2 ปีที่แล้ว +2

    Brilliant tutorial, thank you.

  • @zeroautumn69
    @zeroautumn69 ปีที่แล้ว +1

    cant we map a list of fields using formik? also for the the field type select, for options?

  • @Manojshankar36
    @Manojshankar36 2 ปีที่แล้ว +2

    Nice video.
    But how can we handle optional date fields.
    Issue: if we enter a date and remove it, it’s still showing type error validation for optional date field. Is there any work around to fix this bug.

  • @hideinbush0
    @hideinbush0 ปีที่แล้ว +1

    You are an excellent teacher. Hope to see more from you in the future : )

  • @jasongrant2366
    @jasongrant2366 3 หลายเดือนก่อน

    Awesome job! just got one question, what's the purpose of creating custom inputs?

    • @jasongrant2366
      @jasongrant2366 3 หลายเดือนก่อน +1

      Never mind, I see the great use of it!

  • @grimjim8463
    @grimjim8463 ปีที่แล้ว +2

    great video, thanks

  • @Stories_hubs
    @Stories_hubs 2 ปีที่แล้ว +1

    Thanks for this video it's really helpful us.

  • @eternalharmony0
    @eternalharmony0 2 ปีที่แล้ว +2

    You are so good man. TYSM

  • @Za3DoRzX
    @Za3DoRzX 2 ปีที่แล้ว +2

    Not sure if people have encountered this problem but when trying to call the useFormik() hook it states that it's neither a React function component or custom React function.

    • @jtaylor8606
      @jtaylor8606 ปีที่แล้ว +1

      Did you import it at the top of your code?

  • @nachopuntocasanova
    @nachopuntocasanova 2 ปีที่แล้ว +2

    Fantastic tutorial! Thanks

  • @digigoliath
    @digigoliath 2 ปีที่แล้ว +2

    Awesome!!! TQVM!! U have a new sub.

    • @nikita-dev
      @nikita-dev  2 ปีที่แล้ว +1

      thanks so much!

  • @maximilianonunez5780
    @maximilianonunez5780 3 หลายเดือนก่อน

    the best video that i ve ever seen
    greets from argentina

  • @yura-serkiz
    @yura-serkiz 10 หลายเดือนก่อน +1

    Cool video😎 Thanks you)

  • @IhorKacher
    @IhorKacher ปีที่แล้ว +1

    Amazing

  • @kirwakelvinkering3122
    @kirwakelvinkering3122 2 ปีที่แล้ว +2

    Thank you so much 👏

  • @alamin-ofc
    @alamin-ofc 2 ปีที่แล้ว +3

    Thanks man

  • @specstet
    @specstet ปีที่แล้ว +1

    Excellent course -thanks a lot

  • @matiasjaliff3243
    @matiasjaliff3243 2 ปีที่แล้ว +2

    Great!!! New fan here!

  • @sertacglr
    @sertacglr ปีที่แล้ว +1

    thank you so much

  • @eda2160
    @eda2160 2 ปีที่แล้ว +2

    Thank you for uploading tNice tutorials video , so much information!

  • @madhawa97
    @madhawa97 8 หลายเดือนก่อน +1

    Thanks!

  • @kavishkahenderson5724
    @kavishkahenderson5724 ปีที่แล้ว +1

    Thank you

  • @DCMPSaliva
    @DCMPSaliva ปีที่แล้ว +2

    make sure you have handleBlur={handleBlur} in each input or the error handling with 'touched' wont work

  • @mohanishsaim9537
    @mohanishsaim9537 7 หลายเดือนก่อน +1

    How can we use it with react-select where multiple selection is used

  • @thesatishjassal
    @thesatishjassal ปีที่แล้ว +2

    awesome

  • @vladvoloshenko5701
    @vladvoloshenko5701 ปีที่แล้ว +2

    thank u

  • @khanhhoanguyen1740
    @khanhhoanguyen1740 2 ปีที่แล้ว +1

    i have a problem, i want only validate, change color input when i blur this input. But when i type in input, event handleChange was called, it validated my input and change color my input. Help and ty

  • @yossiyun
    @yossiyun 12 วันที่ผ่านมา

    Just for yt algo… Awesome video btw 👍🏾

  • @mncreations2857
    @mncreations2857 2 ปีที่แล้ว +2

    damn tNice tutorials felt like i learned a new language or programming.

  • @hackehack4278
    @hackehack4278 2 ปีที่แล้ว +2

    yes

  • @nazrinatayeva4866
    @nazrinatayeva4866 2 ปีที่แล้ว +2

    Спасибо большое!🥺

  • @amrmashaal834
    @amrmashaal834 3 หลายเดือนก่อน +1

    Thank you. it is really helpful