React Form Validation Using Custom Hooks Tutorial - Beginner React JS Project
HTML-код
- Опубликовано: 31 май 2024
- Learn how to build a simple form in React with validation using custom hooks in this beginner React JS Project tutorial. We will only build the frontend for this form and display a simple error message if the inputs are not correct. Feel free to refactor the code and add this design to a backend or firebase.
If you want to follow me along my coding journey, be sure to subscribe :)
/ @briandesign
Source code
github.com/briancodex/react-f...
Timeline:
0:00 React form we're building
1:13 Creating React App
4:00 Creating Project Files
6:55 Editing FormSignup Component
13:51 Creating Custom useForm hook
22:07 Creating Validation Code
28:57 Displaying Error Messages
32:48 Creating Submit Form Function
35:24 Display Success after submitting
38:58 Adding the CSS
41:30 Submit only if zero errors
React Todolist App Tutorial
• React Todo List App Tu...
Responsive React Website Tutorial
• React Website Responsi...
I wish I had seen this tutorial a few weeks ago for an interview. It's pretty tricky validation in React when you're a beginner learning it. Thanks for sharing it!
I loved the way you say *boom!* every time. That keeps the level of energy up.
Thanks so much for this video. I really appreciate how you just explain things very simply and directly and also how you explain *every* step you show.
hey thank you for the tutorial. It really helps me learning react hooks, especially custom hook
Thank you very much for your efforts. Your videos are perfect. You explain everything in detail. Super easy to follow. Keep up the good work.
Thanks Nassim!
I like how u show little extra tips, such as clicking SHIFT & SPACE to finish naming the component
Very Clean design pattern. Thank you
Actually this is the best validation i have ever seen
..to the point
I m facing problem regarding this method
Thank you very much for this wonderful tutorial. It's truly awesome!
ILL SEE N YOUR YOU TUBE CHANNEL
Great tutorial, thanks!
Another great video! You're an awesome tutor
Helped me out a lot, Thanks man...
WOW, you make it sound easy with your explanation bro. I come here after watching a responsive sidebar. And this completes my way to create my own library bro. Thank you so much, bro. I'm falling in love with how you doing your code.
Thanks Louis!
same
Your tutorials are too awesome...I loved it so much....
Glad you like them!
You are the best Brian
Thank you Brian for another awesome tutorial !
I have made some minor adjustment to the cross button appearing on the FormSignUp page. It will now only appear on FormSuccess page which is after submitting the form, and clicking it will refresh the page.
import React from 'react'
import './Form.css'
const FormSuccess = () => {
const refreshPage = () => {
window.scrollTo(0,0);
window.location.reload();
}
return (
x
We have received your request!
)
}
export default FormSuccess
This was really helpful thank you...
thank you for your instruction. It is really help me a lot.
just the video i need for my project
Hey Brian this tutorial is Awesome 👌 Please make more projects on reactJS
Will do!
Amazing video and to the point! Would be amazing to see how a similar form can be implemented with an email sender. I would be curious to see how can you gather client's info and send it via email to yourself
Amazing project tutorial. Thank you. Just a few things the linter complained about. The first one was /anchor-is-valid. For the anchor tag used in the span tag right below the button in FormSingup.js the linter wanted a valid href attribute. I always thought '#' was valid but i guess not because it complained about it so i changed it to href="./". The second linter that complained was /img-redunant-alt which was referring to the alt attribute on the img tag in FormSuccess.js. It said "redunant alt attribute. Screen-readers already announce 'img' tags as an image. You don't need to use words 'image', 'photo' or 'picture' (or any specified custom words) in the alt prop." So I just changed it to alt="success-img". lol funny the linter didn't complain i changed it to that cause it's still redundant. And the last linter that complained was /exhaustive-deps which said "React Hook useEffect has missing dependencies: 'callback' and 'isSubmitting'. Either include them or remove the dependency array. If 'callback' changes too often, find the parent component that defines it and wrap that definition in useCallback." Dan Abramov addressed this issue and you can read more about it at the link i provided but basically he said generally speaking it is NOT safe to omit functions from the list of dependencies. I'm not experienced enough to know if listing all three functions in the dependencies will have any negative side effects. I changed it to include all functions in the list of dependencies for useEffect and it doesn't seem to have broken the error messages. But I would like to know was including all three functions [callback, errors, isSubmitting] in the list dependencies for useEffect the "correct" fix or is there another way address the issue that's more suitable?
reactjs.org/docs/hooks-faq.html#is-it-safe-to-omit-functions-from-the-list-of-dependencies
amazing experience 🤩
thank so much for sharing useful content..
Coool thank you so much!
thank you so much.it was useful.
Sir, This is awesome 🔥
Thanks Yousuf
the code is sooo clean...
that callback() in useEffect amazed me, i didnt know you can callback to the parent's function like that
Hey do you mind explaining that somehow? I went on mdn read about callback functions and watched some youtube videos about it but I still don't understand why callback is being used there?
Does the callback just run the custom hook again or what exactly is its job here? thanks in advance :)
@@julianb.6580 Yes hooks is meant for code re-use. And in this case, it firing a call-back to run the custom hook.
@@brian-lau thanks man appreciate the response!
@Brian Thank you for pointing this part of the tutorial. I was actually looking for an explanation about the callback() use. :D
This guy is awesome 🔥🔥🔥🔥please make a tutorial series on react
Thanks Yash!
Thanks again ! :)
Thanks again!
Yooo man, thanks
You're a hero
thank you so much!
Thank you !!
Good to move 'validate' inside useForm just for more abstraction :)
This is so lit ❤ 🔥
yessir
I had an error trying to make the error message work and I searched for the problem for houuuuuuurs and then I saw that the problem was that I didn't return the errors... people don't forget to retuuuuuuuurn 😂😅 Amazing video btw!!! Love the structure of the code and everything is really clear 🤗
Very good!!!
Thanks!!
Thank you
Lit AF
Subcribed
great video, but what plugin are u using to show those colored lines that mark matching brackets
Nice work Brian. Like to see how you've progressed over the last couple months. Very helpful videos. Thanks.
Which VS Code Icon theme/extension are you using?
Thanks Joshua! I'm using vscode-icons and Community Material Theme Palenight High Contrast
@@briandesign but brain when I apply it it does not match the theme what is display on the video as colour saturation is different like that
Hi, Thanks for the tutorial. I get the following error in my index.js file ' Parsing error: Unexpected token, expected ",". Any suggestions please?
thank you
@Brian Design what is your callback() in useEffect doing? it seems like you've only called and defined it once. Thanks for the video though
The callback function is the submit form that you pass as a prop into the custum hook useForm. I always call it just like I difened it (submitForm)
Dude, I love your tutorials. I have a question about this one, why didn't you use styled-componenets? Just curious. By the way, get a Patreon started, I'd love to support your work a bit; you've helped a lot.
So nice tutorial!
create by using Redux as well
Hey Brian can you tell me how we can use the useForm hook for radio buttons having different values?
So nice tutorial!
What you use to send emails in contact form with react? For example: firebase, nodemailer or some like this?
Thanks
hi, thanks for the tutorial , how I can dibbled the button once submit , prevent for repeat click..
Brians a beast
thanks Sam
Hey thank you for the tutorial it was super helpful but I'm having an issue with the callback function:
Uncaught TypeError: callback is not a function
Idk why but this seems to not work in my project. Does anyone know what might be wrong?
I am your indian fan, always smile and post new video.
First like and comment..
But watch whole video....am sure it will awesome..
2nd! Thanks Mohit
@@briandesign 2nd..? Awesome video bro..am starting my react js practice and you have been really helpful,.have a fantastic day
@@m..2694 I was saying I was the 2nd comment lol and awesome to hear! have a great day as well!
hi good videos i am try to used your code for validation my fields but i use function in the component and ever out a error default is not a function or its return value is not iterable... do you have something that help me ?
How to make that right side scrollbar disappear for this login page alone, assuming we have to render scrollbar once we login
Hello Brian. great viode!! one question tho. i couldn't get to formSuccess after submitting. I tried the useEffect code shown below comments. the error is
TypeError: Object(...) is not a function
without useEffect. I can see useEffect is not used at all. does anyone know how to get around the error? thanks
Do you have a part 2 for the Login and validation+authentication in let's say a localhost or db that it checks the un+pw to the server and you log in to your "store" or your startpage ?
Would be DOPE Brian!
How can I use the same validation on handleChange ? I want to make the same validation on each input change too.
Why does the first time I change some input, the value returns null? I mean, If I write an "a" inside the name input and console log values.name, it will return """, and if I write another "a", it will console log only "a"", and not "aa".
Please also guide as to how we can validate file and image uploads . using extenshion check and otherwise too. Thanks in advance
Is a good practice create customHooks for differents Components?, I see that is really clean way to separate code from component.
U need and arrow in your setValues , setValues(prev => ({...prev, [name] : value })
Hi Brian, thanks for this tutorial! i just ran into an error while i tried to deploy it in Netlify..
React Hook useEffect has missing dependencies: 'callback' and 'isSubmitting'. Either include them or remove the dependency array. If 'callback' changes too often, find the parent component that defines it and wrap that definition in useCallback react-hooks/exhaustive-deps.
Can you help me fix this issue?
Hey if you haven't already fixed this, you can fix it by going to your submit handler and wrapping it in a useCallback. I will give you an example using his code.
So in his Form component he has a submit handler which looks like this:
function submitForm() {
setIsSubmitted(true);
}
What you want to do is import UseCallback from react and then change the submit handler to be like this:
const submitForm = useCallback(() => {
setIsSubmitted(true)
}, [setIsSubmitted])
Then also in the custom hook so the useForm component you would want to add the callback and the isSubmitting as a dependancy to the useEffect like this:
useEffect(() => {
if (Object.keys(errors).length === 0 && isSubmitting) {
callback()
}
}, [errors, isSubmitting, callback])
and now it should work :) basically the callback here is referring to the submit function, or thats just my understanding.
Hope this helps you
@@julianb.6580 works for me, thanks!
@@julianb.6580 thanks a lot ! it worked
I have one doubt .Suppose i have multiple forms signup,signin,contactus,etc so where i define state in useForm component if i define here then the state is too large accroding to requirement
I love the Video but the form size does not changes when we minimize the browser...plz help.
hey, why does formSucsess and formSignup divs ahve same name? form-content-right?
Great video!! Can you please make a tutorial on how to do a sticky/fixed navbar while scrolling in react
have you seen the react navbar videos I've made? check out my react website vids and see if that is what you're trying to make
Hi! Great tutorial :) What extensions do you have? When I type .form-inputs nothing happens and u have some cool tool which autocompletes the code. Any tips?
Btw do you have ig?
Everything is fine, but I have a real situation here, that I want to dispatch the input values to the database. How & where can I get hold of them and dispatch? I thought I will dispatch the values from the FormSuccess page, but I didn't know how can I actually get the final values inside this page. Any suggestions Brian?
what is the name of theme that you are using in your vscode?
Excuseme , sir could i video access the video tutorial link for the tutorial React Form Validation Using Custom Hooks with Database Backend?
How do i implement this with axiom for backend?
Thank you for this tutorial. Its very useful. Subscribed
Can anyone explain what is the purpose of the callback() inside the useEffect?
hey i use this in my code but they said TypeError: callback is not a function in useForm.js file can you give me some suggestion?
Superr
How do I display the details taken in as a table?
sorry irrelevant question:
Which theme are you using?
How are you saving the user information
How to access the updated props in form success component?
42:30 - I'm very confuse, where that "callback" comes from and what does it does???
the callback is come from the parameter. In formsignup we pass this : const FormSignup = ( {SubmitForm} ) => {
const {handleChange,values,errors,handleSubmit} = useForm(
SubmitForm, here he is you see
validataInfo
)
when we go to useform . we say this submit form : a callback
Callback function in useEffect how to fix depency aaray
callback is not a function? my page looks exactly like yours. not sure what's happening..
Excellent tutorial brother . How can I activate these errors onBlur. Please reply
in your provided source code where is package.json file bro, i think it is missing..
how can i create login page in mysql database system
Do you know how you can use axios to post the data from the form to a database
I'd recommend checking out some mern stack videos or ones using mongo db/node for forms if you wanna do that
brian can you help me out how can i display username and email when it says we have recieved your request this question was asked to me in the interview
can someone please explain that useEffect function part
Why from useForm you return object not array?
Did everything according to your code and this error: React Hook useEffect has missing dependencies: 'callback' and 'isSubmitting'. Either include them or remove the dependency array. If 'callback' changes too often, find the parent component that defines it and wrap that definition in useCallback react-hooks/exhaustive-deps
useEffect(
() => {
if (Object.keys(errors).length === 0 && isSubmitting) {
callback();
}
},
[errors]
);
check my github and see if you mistyped anything
@@user-kn4lf4wv4r in the Form Signup file ({ submitForm }) we missed this ...so this error.. :)
Hey if you haven't already fixed this, you can fix it by going to your submit handler and wrapping it in a useCallback. I will give you an example using his code.
So in his Form component he has a submit handler which looks like this:
function submitForm() {
setIsSubmitted(true);
}
What you want to do is import UseCallback from react and then change the submit handler to be like this:
const submitForm = useCallback(() => {
setIsSubmitted(true)
}, [setIsSubmitted])
Then also in the custom hook so the useForm component you would want to add the callback and the isSubmitting as a dependancy to the useEffect like this:
useEffect(() => {
if (Object.keys(errors).length === 0 && isSubmitting) {
callback()
}
}, [errors, isSubmitting, callback])
and now it should work :) basically the callback here is referring to the submit function, or thats just my understanding.
Hope this helps you
Hi sir, very nice video. I've been struggling with the callback function. I've done everything you've written but can't figure out why, my callback function is undefined when accessed from useForm. It seems that passing the submitForm function as a parameter of my form in the Form.js doesn't work. I've been trying for hours but can't figure out what's the issue. Can some one help me ? Thank you.
you probably forgot to pass submitForm down the chain
@@brian-lau I've found out few weeks ago ! It's because I called the parameter validateForm and thought it was the function I passed down the chain that I needed to use. But it was the parameter. They had a different name. Now it works ! Thanks for trying to help.
Hi Sir, could you make a video of sending email contact form.Also, please apply validations......
i have question is there are necceray for me to become expert in js for learning react and how many js i will learn first?
just build 10 javascript projects and then try to follow a react course. If you notice that nothing makes sense, then you should go back to learn more javascript.
I wan to create login page too and look if the values of signup and login is same. How can ı access the values of signup?
did your problem solved?
WHAT is his VSC theme??? Anyone know?
I liked it...please make videos also of react-typescript also....By the way can I get a help from you if needed?Then,how?
Great video. How can i achieve this if i want the validations to run onchange too :-D
Nice tutorial! I followed on my project but I've got a 'callback is not a function' error message when I submit the form, and I don't know why :(
I got the same issue, how do you fix it?
@@xiaoshanli8468 Make sure you have scheduler version 14 or more on your pakage.json dependencies, that made it for me
Change it to a regular function instead of arrow function.. that solved my issue..