Form Validation using React | React Forms Handling & Validation Tutorial | React Sign up Form

แชร์
ฝัง
  • เผยแพร่เมื่อ 1 ม.ค. 2025

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

  • @DipeshMalvia
    @DipeshMalvia  3 ปีที่แล้ว +60

    Guys, if the video is helpful or you learned something than please appreciate and hit the LIKE and SUBSCRIBE button and help this channel to GROW😉

    • @anantjain9679
      @anantjain9679 2 ปีที่แล้ว

      when there is empty object in formErrors, how can render {formErrors.username}, and email, password. 🔴PLEASE REPLY 🔴

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

      how do you clear the input fields after submitting?

    • @Inforaaz1
      @Inforaaz1 2 ปีที่แล้ว

      New subscriber 😊

    • @pavipavii4863
      @pavipavii4863 2 ปีที่แล้ว

      hi

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

      Please send this code to me

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

    This is the best tutorial I have ever seen about form validation, thank you :))

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

    You are so fluent and superrr in React! Excellent Video!

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

    Very clear explanation. Great job as always. Thanks a lot! 😉

    • @DipeshMalvia
      @DipeshMalvia  2 ปีที่แล้ว

      Thanks and glad you liked it!

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

    thanks alot you solved my problem.
    you explain everything very well
    keep going🤩💐

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

    Am new to React and this tutorial helped me a lot and cheers you got a new subscriber.
    Thank you Dipesh.

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

      Thanks and glad you liked it!

  • @itsanishjain
    @itsanishjain 2 ปีที่แล้ว

    thanks it helps, wasted my 3 hours to figure this out and you did it in 10 mins

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

    I liked the tutorial so much. It was so easy to understand because of the way you explain it. I request you not to try a different accent. otherwise its superb. best ever tutorial I have come across in a long time.

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

    Thank you so much, you really helped me with my project in university!

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

    Loved your video! Just an observation, no dev should limit the maximum number of characters in a password, it's a security breach.

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

      Just an example to showcase the validation.

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

    I like the simple and lucid presentation. Good job Dipesh!!

  • @tharagds2526
    @tharagds2526 2 ปีที่แล้ว

    Thank you Dipesh 😊!
    All the very best for your mission!!

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

    8:45 Why it is not taking the first letter we type in the username field.?

  • @akashpatil1638
    @akashpatil1638 3 ปีที่แล้ว +9

    No one can compete with him
    He is legend

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

    Cleared explanation, thank you.

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

    Thanks for the great explanation!

  • @always-ask-why
    @always-ask-why 3 ปีที่แล้ว +2

    Wow! This is really awesome! Thank you for this video.

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

    Very well explained. Thanks,🙂 Dipesh!!

  • @gabrielfono844
    @gabrielfono844 2 ปีที่แล้ว

    great video
    I immediately subscribe.
    this channel will have a million subcribers soon
    luv from california

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

    Very very CLEAR tutorial! thanks 👍♥️

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

    All good until you use nested components and React Hook Form doesn't work. 😔

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

    that's awesome , thankyou so much ... please make more videos specially the react code challenges which are asked in interview

    • @DipeshMalvia
      @DipeshMalvia  2 ปีที่แล้ว

      Sure I will, don't forget to Subscribe, like and share with friends.

  • @Maheshch-m5g
    @Maheshch-m5g 2 หลายเดือนก่อน

    Very nice explanation, thank you

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

    Super sir,thanks alot..very easy to understand...

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

    This video was very helpful! Thank you!!!

  • @DeepakSoni-lx2oi
    @DeepakSoni-lx2oi 2 ปีที่แล้ว +2

    Very Helpful video

  • @theburnetts
    @theburnetts 2 ปีที่แล้ว

    Thank you so much for this! Great video that explained form validation perfectly!

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

    Good infomative video just what i was looking for

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

    Awesome tutorial, thanks!! 👏👏

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

    I love this. Thank you sir

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

    Awesome explanation,

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

    Another important thing you forgot to do. After sign in successfully how to empty the input field?

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

    It is very much usefull video, thank you so much

  • @imran.frontend
    @imran.frontend 2 ปีที่แล้ว

    Great Dipesh
    Love you tutorials everytime

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

    Thank you man, this is really helpfull

    • @DipeshMalvia
      @DipeshMalvia  11 หลายเดือนก่อน

      Glad to hear it!

  • @abheemk
    @abheemk 3 ปีที่แล้ว +6

    hey Dipesh, can you make a video on multi step form without material ui,

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

      Don't have such plans but will think about it.

  • @twetamm7927
    @twetamm7927 2 ปีที่แล้ว

    Thank you so much! Have a good day 😉

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

    Thanks a lot, that is very helpful tutorial!

  • @shekharshashi735
    @shekharshashi735 2 ปีที่แล้ว

    its really help me in my cunstruct week project ....thanx alot

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

    Thank you for the great explanation bro 😊

  • @monicamonie3347
    @monicamonie3347 2 ปีที่แล้ว

    Thank you a lot for this session
    helped me at right time
    😘

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

    That was useful, and thanks for github code!

    • @DipeshMalvia
      @DipeshMalvia  2 ปีที่แล้ว

      Unfortunately I lost that code and can't find it in my machine to upload it to github.

    • @olga_lc
      @olga_lc 2 ปีที่แล้ว

      @@DipeshMalvia there is a link to github code in video description, I downloaded it and used that approach in my task

  • @jacquitratongamanahaja979
    @jacquitratongamanahaja979 2 ปีที่แล้ว

    Thanks for the video man, it's very helpfull!

  • @sanketmane5838
    @sanketmane5838 2 ปีที่แล้ว

    Thank for your explanation.

  • @Manu-de3hj
    @Manu-de3hj 2 ปีที่แล้ว +1

    You are legend🤩

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

    You are doing great bro

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

    Thank you very very much 😍

  • @gcsandesh
    @gcsandesh 2 ปีที่แล้ว

    Helped me, thanks! 👍

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

    Hi! Great video, really helped me alot. But could you please explain the purpose of useEffect in this code again. I dont quite get it since it works the same with and without the useEffect. Thanks in advance!

    • @gudiwithahoodie8174
      @gudiwithahoodie8174 2 ปีที่แล้ว

      Hi Raivo, here it's used just to keep track of when the form is filled correctly and to log the validated info to the console!

  • @vipulmaurya9673
    @vipulmaurya9673 2 ปีที่แล้ว

    very clear tutorial

  • @adarshp82
    @adarshp82 2 ปีที่แล้ว

    Yeah, i found that video for react form validation thanks for creater #Dipesh Malvia

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

    Thanks for the video. I have learnt a lot from your videos. About the form submission, all the values should get submitted after fulfilling all the conditions. isn't it?

  • @investing_with_meet
    @investing_with_meet 2 ปีที่แล้ว

    thank you so much i was stuck in the problem for the last 2 hours🤝🏻

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

    I was the 400th like 🙃🙃

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

    This was a very helpful video, thank you so much you just saved my ass

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

    Very good and clear explanation. Is it possibe to do the form validation using class component. If possible, how?
    Thank you.

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

      The modern way of writing React code is function component so I don't think I will able to a video using Class Components. Sorry brother!

    • @harshavardhanp683
      @harshavardhanp683 2 ปีที่แล้ว

      @@DipeshMalvia No issues. Thank you brother.

  • @suvadeepdutta3461
    @suvadeepdutta3461 2 ปีที่แล้ว

    You are simply great

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

    Hi Dipesh! Thank you so much for this video! This helped me understand useState very well along with form validation. One question though, how do you get rid of the code that lingers above the form? I see it is coming from the initial values variable but have tried to remove it and nothing seems to work. Thank you in advance.

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

      In the return, just remove tag and any content inside.
      Author used this aproach to show updated values of each fields on the screen instead of logging them in the console with console.log(), that's it.

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

      @@georgesword2012 thank you :)

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

      i@@georgesword2012 i removed the pre tag but it showed error

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

    Hi Dipesh, thank you so much for such informative video. However, if I want to clear the form once I click on the submit button and if everything is valid, what can be done in that case.

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

    when there is empty object in formErrors, how can render {formErrors.username}, and email, password.

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

    Isn't using setState better? Btw I am new to react and this was what the console was saying.

  • @gameskikahaniyan.587
    @gameskikahaniyan.587 2 ปีที่แล้ว +1

    Please dipesh make a video on reusable components. It is a request 🙏🙏🙏

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

    how can we use custom hook for validation

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

    This form is still being submitted if there are errors in the fields, any solutions???

    • @acolitosdevecna7110
      @acolitosdevecna7110 2 ปีที่แล้ว

      It doesn't work in real scenario

    • @acolitosdevecna7110
      @acolitosdevecna7110 2 ปีที่แล้ว

      Put setIsSubmit(Object.keys(formErrors).length === 0) inside the validate function

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

    How can disabled button when the form is not valid ??

    • @CodeSuraZz
      @CodeSuraZz 2 ปีที่แล้ว

      exactly, this form is still being submitted.. no use of validations if it submits error data

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

    Thanks alot for this tutorial. But i have a bit problem on the regax of Email....!!!!

    • @DipeshMalvia
      @DipeshMalvia  2 ปีที่แล้ว

      What happened? You can find the email regex easily on internet.

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

      @@DipeshMalvia ok, it working now ! thank you so much Teacher!!
      i did a wrong condition on errors of regax email !!! so that the problem of my coding

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

      @@foxynight1688 : Superb!

  • @slingshottherapper5937
    @slingshottherapper5937 2 ปีที่แล้ว

    help solve my this one dout.
    how can prevent user from entering spaces in input field.
    i mean what the user enters name as " " or a full stop or a series of full stop, spaces or special charater how can i prevent these errors in input fields.

    • @DipeshMalvia
      @DipeshMalvia  2 ปีที่แล้ว

      You need to use regex for that and prevent from entering such special characters in name input field.

    • @slingshottherapper5937
      @slingshottherapper5937 2 ปีที่แล้ว

      @@DipeshMalvia ok thank you 🙂

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

    How do I redirect to another component post successful validation in native react?

    • @DipeshMalvia
      @DipeshMalvia  2 ปีที่แล้ว

      I guess protected route is the way to redirect after successful login. You can my protected route video for reference.

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

    Great explanation Dipesh .One question regarding css style where are the classes ui divider etc in the git repository?

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

      I found it from the last video ,ui semantic

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

    Hi there Dipesh, thanks for this!
    However I was wondering how can we live validate a username so we know its available or not? Im using NextJS with Supabase.

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

    which library you are using for CSS ?

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

    Bhaiya how to validate form using bootstrap validation or jQuery validation on button click not onSubmit?

  • @hijabigirl150
    @hijabigirl150 2 ปีที่แล้ว

    can u pls make a video about redux persist

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

    Hii @Dipesh great video... But why do I have to click twice to submit form...

    • @DipeshMalvia
      @DipeshMalvia  3 ปีที่แล้ว

      I don't have to click twice on submit form. Can you check adding console.log what happens in first click ?

    • @apurvchatur2424
      @apurvchatur2424 3 ปีที่แล้ว

      @@DipeshMalvia Let me check...

  • @noorb374
    @noorb374 2 ปีที่แล้ว

    please sir explain why we have used useEffect here ...

  • @mikeey
    @mikeey 2 ปีที่แล้ว

    very good video, thank you

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

    Nice but can you add uncontrolled inputs like dropdown, radio & checkbox inputs?

    • @DipeshMalvia
      @DipeshMalvia  2 ปีที่แล้ว

      Sure we can take that up in some other video!

    • @trups11trupti
      @trups11trupti 2 ปีที่แล้ว

      @@DipeshMalvia Thats great 👍

  • @virujamwal8019
    @virujamwal8019 2 ปีที่แล้ว

    why the error messages no removed when we correct the input, How to make error messages hide or show onchange of input?

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

    How can we add contact number validation in this form only number are allowed.

    • @DipeshMalvia
      @DipeshMalvia  2 ปีที่แล้ว

      Thanks and glad you liked it!

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

    How to validate duplicate (redundant) input value..?
    In react typescript
    For example,
    User given name :
    1st user;
    Name: Anu
    2nd user;
    Name: Anu
    In this case, how to handle?

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

    How to make like that : I wanna error message show in focus in each field and button disabled

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

    It's a great video but also tell me how to store data in local storage

  • @srinidhis6180
    @srinidhis6180 8 หลายเดือนก่อน

    hi dpesh i couldnot create account in relevel..ur videos are good i am looking for a change now..this relevel is very good for me..could you help me any resource for creating account..i havent received any otp when i loggedin

  • @VikasGupta-ok9lh
    @VikasGupta-ok9lh ปีที่แล้ว

    brother one doubt is there even after submitting the form it is displaying the data how we can clear data on succssful submission

  • @watherby29
    @watherby29 2 ปีที่แล้ว

    Why can't form be submitted in handleSubmit? Why is useEffect needed?

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

    Can you guide us how to reset form after submit it is a important part of any forms

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

      Either you can set the state to empty string or event.target.value = ""

    • @hemantagrahari4298
      @hemantagrahari4298 2 ปีที่แล้ว

      @@DipeshMalvia can you elaborate more I didnt understand I tried with setFormValue =" " in handle submit but it didn't work please give me solution
      It will great help

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

    Thanks a lot!

  • @cswithus3360
    @cswithus3360 2 ปีที่แล้ว

    On submitting form current value of isvalid and formerror length is updating on clicking twice .... Please get to know how to solve

  • @abhis7478
    @abhis7478 2 ปีที่แล้ว

    In if statement, why is it errors.username='username is required' but not key-value pairs ?

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

    How we download this form in pdf result

  • @TheHelpOfNS
    @TheHelpOfNS 2 ปีที่แล้ว

    Hi bro what is ur git hub name bro... excellent 👌👍

  • @uwuslayer0211
    @uwuslayer0211 2 ปีที่แล้ว

    will this work if i replace the input fields wth textarea ?

  • @SachinYadav-yx1rc
    @SachinYadav-yx1rc 3 ปีที่แล้ว +1

    This code is not present in your github link provided in the description, both the branches have same code of react-hook-form

    • @DipeshMalvia
      @DipeshMalvia  3 ปีที่แล้ว

      Let me check. I will update you.

    • @mle3638
      @mle3638 3 ปีที่แล้ว

      @@DipeshMalvia Thanks for this amazing video. Which way do you think is the most correct way to handle the validation? like the video or like the way you show in the github by using 'ref' and 'useForm'. Which way do you normally use? Thanks!!

    • @afolabioladipo2785
      @afolabioladipo2785 3 ปีที่แล้ว

      @@DipeshMalvia pls after FOLLOWing your steps, my form still submit empty fields in my DB after flagging the errors.

    • @DipeshMalvia
      @DipeshMalvia  3 ปีที่แล้ว

      @@afolabioladipo2785 : make sure after setting the error msg you add return statement otherwise the follow will continue.

    • @afolabioladipo2785
      @afolabioladipo2785 3 ปีที่แล้ว

      @@DipeshMalvia am not getting it sir, it works but it still submit the error into my DB after raising the error.

  • @kundankunal4190
    @kundankunal4190 2 ปีที่แล้ว

    Great!!!

  • @JITENDERKUMAR-hz1mj
    @JITENDERKUMAR-hz1mj 2 ปีที่แล้ว

    But the form is still submitting. If we console.log values in handlesubmit function

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

    Nice..please create realtime chat app in React native.. 🙏🙏

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

      Sure. will think about it.

    • @frontendHacks
      @frontendHacks 2 ปีที่แล้ว

      th-cam.com/video/WWiQ33h980U/w-d-xo.html&ab_channel=Front-EndHacks
      Please check this video for Formik and Yup Form Validation in Hindi

  • @Sirisha-b1y
    @Sirisha-b1y ปีที่แล้ว

    How to give reg Ex for email validation????

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

    good!!! validation

    • @DipeshMalvia
      @DipeshMalvia  2 ปีที่แล้ว

      Thanks and welcome to channel!

  • @mdnaushadali8241
    @mdnaushadali8241 2 ปีที่แล้ว

    Anyone please help me to understand this line
    why we are checking keys values length of Object instead of doing this ---
    if(Object.values(formErrors).length ===0 && isSubmit)

  • @akhilpratapsingh1738
    @akhilpratapsingh1738 2 ปีที่แล้ว

    How to remove above object that show on screen??