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

In this video we will learn how we can handle and validate Forms in React without using any external package or library. We will validate the form using React Hooks.
🔥 Relevel by Unacademy👇
It is India's first platform to help all aspirants have access to their dream job. By taking the Relevel Test, they engage in comprehensive skill assessments, which evaluate industry relevant skills and their job-readiness.
Platform link - relvl.co/d82r
Business Development: bit.ly/3AyFU5r
Backend Development: bit.ly/3uZsjmj
Frontend Development: bit.ly/3DksJGJ
⭐️GitHub link for Reference⭐️
github.com/dma...
⭐️ Support my channel⭐️
www.buymeacoff...
**React Roadmap for Developers in 2021**
How to Learn React JS ? - • React JS Roadmap for D...
React Fundamentals Project - • Learn React JS Fundame...
Learn React Redux with Project - • Learn React Redux with...
What is Redux ? - • Understanding Redux Co...
Learn React Redux Thunk with Project - • Learn React Redux Thun...
Learn CSS GRID Tutorial - • Learn CSS GRID Tutoria...
**Checkout these video to understand better**
JavaScript ES6 Arrow Functions - • JavaScript ES6 Arrow F...
JavaScript Higher Order Functions & Arrays Methods - • 13 Must Know JavaScrip...
JavaScript ES6 Destructuring - • JavaScript ES6 Destruc...
**More videos**
JSON Crash Course - • Learn JSON in 25 Minut...
Asynchronous Vs Synchronous Programming - • Asynchronous Vs Synchr...
Async JavaScript Callback - • Async JavaScript Callb...
Async JavaScript Promises Tutorial - • Async JavaScript Promi...
**Checkout my Crash courses for get started with web development**
JavaScript Tutorial For Beginners - • JavaScript Tutorial fo...
HTML5 Crash Course in 1 Hour - • HTML5 Crash Course for...
CSS Crash Course in 1 Hour - • CSS Crash Course For A...
🔗 Social Medias 🔗
Twitter: / imdmalvia
Facebook: / programmingwithdipesh
Instagram: / dipeshmalvia
LinkedIn: / dmalvia
⭐️ Hashtags ⭐️
#react #forms #hooks #beginners #tutorial #relevel
Disclaimer:
It doesn't feel good to have a disclaimer in every video but this is how the world is right now.
All videos are for educational purpose and use them wisely. Any video may have a slight mistake, please take decisions based on your research. This video is not forcing anything on you.

[@DipeshMalvia]

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]

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

[@christopherpink842]

how do you clear the input fields after submitting?

[@Inforaaz1]

New subscriber 😊

[@pavipavii4863]

hi

[@satishnaidu6125]

Please send this code to me

[@zte185]

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

[@maryamebadi94]

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

[@DipeshMalvia]

Most welcome 😊

[@khappa813]

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

[@DipeshMalvia]

Thanks!

[@abheemk]

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

[@DipeshMalvia]

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

[@ashishmangla221]

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

[@CodeSuraZz]

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

[@EverydayMaverick]

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

[@DipeshMalvia]

Thanks and glad you liked it!

[@rakeshkumarparida98]

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

[@ironsand]

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

[@DipeshMalvia]

Just an example to showcase the validation.

[@sanjaybisen2808]

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

[@DipeshMalvia]

Thank you! 😃

[@CodeSuraZz]

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

[@acolitosdevecna7110]

It doesn't work in real scenario

[@acolitosdevecna7110]

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

[@thechillyoshi6423]

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

[@DipeshMalvia]

Glad I could help!

[@anantjain9679]

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

[@Daamilola]

Thanks for the great explanation!

[@DipeshMalvia]

Glad it was helpful!

[@mdnaushadali8241]

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)

[@noorb374]

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

[@DipeshMalvia]

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

[@SurendraJayswal]

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

[@DipeshMalvia]

Thanks and glad you liked it!

[@alishadeo16]

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.

[@DeepakSoni-lx2oi]

Very Helpful video

[@DipeshMalvia]

Glad it was helpful!

[@aswinik118]

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?

[@srinidhis6180]

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

[@hemantagrahari4298]

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

[@DipeshMalvia]

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

[@hemantagrahari4298]

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

[@penggao6905]

Thanks a lot, that is very helpful tutorial!

[@DipeshMalvia]

Glad it was helpful!

[@harshavardhanp683]

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

[@DipeshMalvia]

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]

@@DipeshMalvia No issues. Thank you brother.

[@mansitrivedi195]

It is very much usefull video, thank you so much

[@DipeshMalvia]

Glad it was helpful!

[@gameskikahaniyan.587]

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

[@arpitachiddarwar5223]

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.

[@muhammadridhoprakarsa]

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

[@adarshrathi8265]

How we download this form in pdf result

[@Web_mentor]

useEffect(() => { if (Object.keys(error).length === 0 && isSubmit) { } }, [error]) what is the use this useEffecct someone can your's explain me

[@Web_mentor]

also issubmit and set submit

[@amitgahlawat4337]

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

[@DipeshMalvia]

Thanks and glad you liked it!

[@pavanmyana5020]

if (!values.password) { errors.password = "Password is required!"; } else if (values.password.length < 8) { errors.password = "Password must be atleast 8 characters"; } this else if codition error message is showing to me . even i entered 8 characters length

[@murali-krishnan]

weird

[@frontendHacks]

kzbin.info/www/bejne/jYjMgmZpnZ5rZrc&ab_channel=Front-EndHacks Please check this video for Formik and Yup Form Validation in Hindi

[@murali-krishnan]

​@@frontendHacks I don't know Hindi man anyways thx for sharing the video. Pls add Eng subs It would be helpful for Non-Hindi speakers as well.

[@foxynight1688]

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

[@DipeshMalvia]

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

[@foxynight1688]

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

@@foxynight1688 : Superb!

[@TheHelpOfNS]

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

[@always-ask-why]

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

[@DipeshMalvia]

Glad you liked it!

[@_Blackwolf_01]

how can we use custom hook for validation

[@vigneshinvicible1438]

In this video when username name already exists show notify how to do that

[@pratyushadas5233]

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

[@DipeshMalvia]

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

[@mcaddit6802]

Jay Shree Krishna bro, seems like Gujarati

[@raivosulla4840]

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]

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!

[@akashpatil1638]

No one can compete with him He is legend

[@DipeshMalvia]

Haha..Thankyou!

[@DeArtTerminator]

I was the 400th like 🙃🙃

[@Sirisha-b1y]

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

[@panchalpranav7799]

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

[@אביאמן]

Thanks a lot!

[@DipeshMalvia]

You're welcome!

[@kimdev11]

Thanks a lot!

[@DipeshMalvia]

You're welcome!

[@tek_stack]

Thanks a lot

[@DipeshMalvia]

Welcome! don't forget to Subscribe, like and share with friends.

[@BengalSportsHitz]

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

[@DipeshMalvia]

Sure. will think about it.

[@frontendHacks]

kzbin.info/www/bejne/jYjMgmZpnZ5rZrc&ab_channel=Front-EndHacks Please check this video for Formik and Yup Form Validation in Hindi

[@apurvchatur2424]

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

[@DipeshMalvia]

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

[@apurvchatur2424]

@@DipeshMalvia Let me check...

[@shahrukhsaifi836]

This form is not fully validated sir ?

[@mdnaushadali8241]

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

[@prasantkamble10]

Thank you

[@DipeshMalvia]

Welcome 😀

[@abhishekgaur9151]

Very well explained. Thanks,🙂 Dipesh!!

[@DipeshMalvia]

Glad you liked it

[@neets7519]

Awesome tutorial, thanks!! 👏👏

[@DipeshMalvia]

Glad you liked it!

[@ratiarahman8262]

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?

[@pradnyad1234]

please help:( const { email, password } = admin; const response = await fetch('/admin/login', { method: 'POST', headers: { "Content-Type": "application/json" }, body:JSON.stringify({ email, password }) }); const result=await response.json(); if(result.status===404|| !result){ alert('Invalid Credentials'); } else{ alert('Login Successful'); window.location.href='/adminlogin'; } if i have to add this code where should i after doing the validations as per your video.....this code is to be executed on form submit or onclick of loginbutton??? pleaseeeee helpp

[@punitpatel1493]

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

[@bangaramraji917]

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

[@DipeshMalvia]

Thanks!

[@akhilpratapsingh1738]

How to remove above object that show on screen??

[@olga_lc]

That was useful, and thanks for github code!

[@DipeshMalvia]

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

[@olga_lc]

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

[@umamiimamu]

Thank you man, this is really helpfull

[@DipeshMalvia]

Glad to hear it!

[@ranajoyghosh1008]

And WHAM! Well you're drunk now!

[@watherby29]

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

[@nidhisharma7119]

thanky ou for your knowladge\

[@slingshottherapper5937]

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]

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

[@slingshottherapper5937]

@@DipeshMalvia ok thank you 🙂

[@smarttechinfo4512]

Sir, i have a question .Suppose I have a file input to upload. If anyone change the extension and upload it to the server. In that case how to validate that file before uploading... Eg. Suppose I have a file virus .zip , now I change it to virus.png and upload it to the server.. then how to protect the server from this kind of hoax image through validation...

[@georgesword2012]

Very very CLEAR tutorial! thanks 👍♥️

[@DipeshMalvia]

Thanks and welcome!

[@khizrshaikh9902]

First I want heart

[@abhis7478]

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

[@JITENDERKUMAR-hz1mj]

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

[@prasannakumaryeneti6640]

Cleared explanation, thank you.

[@DipeshMalvia]

Glad it helped!

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

[@heatherherries9359]

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]

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]

@@georgesword2012 thank you :)

[@rereroi]

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

[@thevloglife105]

There is no update form validation via github

[@DipeshMalvia]

Please check the branches

[@thevloglife105]

@@DipeshMalvia Got it, Thank you

[@miesineagent]

sir please explain explicitly and annotate everything before going to the next, if next time. thank you

[@袁潤江]

Why did you say that most of the big companies used minimum external packages and libraries?

[@DipeshMalvia]

@@袁潤江 because that is true, these libraries and package have vulnerabilities and less preferred that doesn’t mean that companies don’t use external packages and libraries

[@袁潤江]

@@DipeshMalvia I think that there are limitations when using react-hook-form. I'm doing a project using useFieldArray from react-hook-form. However, I find that useFieldArray automatically generates id of type string as key prop for rendering lists. That means we can't use id of type long generating from database as key prop. Do you have experience about this?

[@trups11trupti]

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

[@DipeshMalvia]

Sure we can take that up in some other video!

[@trups11trupti]

@@DipeshMalvia Thats great 👍

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

[@deveshpatel3167]

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

[@kacperkepinski4990]

checkbox doesnt work

[@agnesudoh505]

I love this. Thank you sir

[@DipeshMalvia]

Welcome!

[@virujamwal8019]

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

[@krupalpatel3287]

When i am copying Email and past it then why error not got help me !!!

[@krupalpatel3287]

paste*

[@eximias5896]

How to Clear Input values after form submit ????

[@cswithus3360]

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

[@adarshp82]

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

[@muscl-cuts]

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

[@kacperkepinski4990]

what about onchange?

[@musiclovers8488]

its not a laravel's form validation but i want to show laravel's form validation

[@aayushgupta6914]

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

[@tusarahmed5708]

Thank you very very much 😍

[@DipeshMalvia]

You're welcome 😊

[@gabrielfono844]

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

[@MichaelGPadin]

❤️

[@DipBeats_]

which library you are using for CSS ?

[@shekharshashi735]

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

[@surajjadhav2829]

Thank you sir

[@mhk7491]

Awesome explanation,

[@DipeshMalvia]

Thank you!

[@rb_1994]

Thank you for the great explanation bro 😊

[@DipeshMalvia]

Glad it was helpful!

[@DeepakLalchandaniProfile]

Do you have the code for javascript form validation . Share the source code link

[@nehalbhatnagar1749]

Sir I can't Edit my text boxes by this code. Why??????????

[@sumasreereddy4684]

yeah i too strucked here and found solution. const initialValues = { username: "", email: "", password: "" }; here he used username so go to the username input field and write name="username" .

[@sumasreereddy4684]

accordingly do to the remaining input fields also.