No video
Form Validation In React Using YUP Tutorial
In this video I will teach you guys how to validate inputs and forms in ReactJS using a famous library called YUP. With this we can validate email inputs, password inputs, use regex and much more.
-
🚀 Learn ReactJS By Building 6 Projects: codedamn.com/l...
Please leave a comment on what topic you guys want me to cover next!
-
❤️ Support the Channel: / pedrotech
📞 Tutoring Session: www.fiverr.com...
💻 PedroTech Discord: / discord
-
Social
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
Website: machadopedro.com
Twitter: / pedrotech_
Linkedin: / machadop1407
Instagram: / _pedro.machado_
Github: github.com/mac...
Email: machadop1407@gmail.com
Tags:
- YUP
- Form Validations
- ReactJS Tutorial
- ReactJS and MySQL
- NodeJS Tutorial
- API Tutorial
Пікірлер: 97
Finally a video which talks about YUP, no more, no less. And especially not some form library I don't care about
Congrats on 2k man🔥🔥 It was quick from 1k to 2k Let's go let's go!!!!💪
@PedroTechnologies
3 жыл бұрын
Lets gooo bro! I can't believe how fast the channel is growing hahaha Thank you for being here since the beginning!
@DavidChuksPatrick
Ай бұрын
🎉🎉3 years later. The growth is massive ❤205k
Explicação precisa, inglês impecável. Parabéns, Pedro. E obrigado pelo vídeo!
@PedroTechnologies
3 жыл бұрын
Fico feliz que gostou!
keep posting man i love your videoss
@PedroTechnologies
3 жыл бұрын
More to come!
Thank you so much. I was trying to find out how to use Formik + Yup, and your video was very helpful with regard having Yup validations in a separated file.
Great and short explanation, thanks
@PedroTechnologies
3 жыл бұрын
Glad it was helpful!
The name should be string, Elon musk child will be 👀👄👀
@PedroTechnologies
3 жыл бұрын
Lmaoo
Hey pedro, how can you display custom error messages using this?
Very well put. Simple and clear. Thanks
Salvou a patria!! Bom pra não deixar sem nenhuma validação no começo.
Thats way easier than Regex, thanks man
@PedroTechnologies
3 жыл бұрын
You bet, glad to help!
great work! time to implement this to my little use-case project xD
@PedroTechnologies
3 жыл бұрын
Thakn you!
Can I ask the name of the theme extension you used in this video?
@PedroTechnologies
3 жыл бұрын
Hey, I believe I used Andromeda in this video!
Wooooooooooooooooooooooooooooooow! Great video pedro, this helped me so much! I appreciate your kind help sir
Cara é incrivel, eu consegui treinar o meu ingles e fazer a validação, você é foda!
@PedroTechnologies
3 жыл бұрын
kkkkkk muito bom! Fico feliz :)
quick and to the point, thanks
Thanks man, this is great!
1 like from codito because you deserve it!!!!
@codito7388
3 жыл бұрын
I am not arrogant and i appreciate others job!!! Try to do everything from scratch like you do!!! In my channel i do everything from scratch... a lot of time but this is the best way to tech someone.
@PedroTechnologies
3 жыл бұрын
Thank you bro! I like ur videos too, u make great content!
How can I add another input field to confirm password and check if the 2 passwords match?
@PedroTechnologies
3 жыл бұрын
This explains pretty well: til.hashrocket.com/posts/vahuw4phan-check-the-password-confirmation-with-yup
@bhatiashivam
3 жыл бұрын
@@PedroTechnologies thank you
Valeu demais!! Estava morrendo tentando validar o email por REGEX. Me salvou!! Valeu demais!!
Great work man ...... you are being really helpful for me as Iam trying to become a web developer . You have helped me a lot m8 ( ❤ all the way from india)
@PedroTechnologies
3 жыл бұрын
Thank you man! Really happy am am being able to help you!
thank you! really helpful video
ingles brabo mano, bom video!
can you create multiple/dynamic field validation. that would help us a lot too like where you click a button then new textfield is added. then you validate it too
@kevyyar
2 жыл бұрын
Yup!
1 year later, there's also Zod form validation, but I'm used to formik and yup. I want to try zod one day though. 😊
Hi , Can you please make a video on Login and profile functionality by using MySQL node and react
@current5
3 жыл бұрын
yes please
@PedroTechnologies
3 жыл бұрын
Hey, I actually have 3 videos on the topic using React Node and MySQL! Here is the link to the playlist: kzread.info/head/PLpPqplz6dKxVC1RlVMH_LcZz2vUheC1-i
@hk_driving3178
3 жыл бұрын
@@PedroTechnologies thanks... really helpful 👍❤️
Very helpful. Gracias Señor!
Well explained, Thank you 😊
Hi i have been trying to wrap my mind around yup validation for patch request where all required fields in the yup schema is not present in the request body? What your suggestion?
Good job!
Só tenho uma pergunta, quando eu quero validar se o email já existe no banco de dados, como eu faço para validar isto com YUP?
@PedroTechnologies
3 жыл бұрын
Boa, pra fzer isso tem que ser no backend pesquisando na base de dados pra ver se o email existe, o yup é so pra validar formatação e tipos de dados!
Great man!
@PedroTechnologies
3 жыл бұрын
Thank you! Glad you liked it!
cool mr Pidhro
Great tutorial. I really hope you can make a tutorial for email verification after sign up.
@PedroTechnologies
3 жыл бұрын
Hi, yes this video is on the plans! I am thinking of releasing it this week!
@zhichengyu950
3 жыл бұрын
@@PedroTechnologies Thanks a lot bro!
you are the best.
well well well nice!
Hi Pedro, can you please make a video on React Bootstrap, Saas and styled components? Currently having trouble with these.
@PedroTechnologies
3 жыл бұрын
Hey, ive never actually used saas, but i Have a full styled components crash course in my channel. I also have used bootstrap so I can make a video about it!
@Abdullah-uv9nk
3 жыл бұрын
@@PedroTechnologies Awesome, thank you!
Hi Thanks for the class. I have a problem with Formik and YUP, someone know how can I send a request to validate an email to the user email, and even this logic is possible to use when the user forget the passwoard? Thanks!
An easier way to get data from the form is like this const onSubmit = (e: any) => { e.preventDefault() const formData = new FormData(e.currentTarget) const data = Object.fromEntries(formData) }
I was watching the video when you put "Machado" in the email I knew you were Brazilian lol
Cool ending music, but I couldn't find the top right corner video
Issue is formik cannot have nested forms
Super sir
Nice tutorial but Where is the video for formik and yup?
Heya, would u mind sharing what VSC theme u're using? Thanks in advance
@tech3425
2 жыл бұрын
Still waitin on that
Explained very well, only thing is: How I can show error indication or messages?
@dheerajtp5757
2 жыл бұрын
instead of isValidate use validate function inside yup with try catch block and take errors which is present inside error in catch block //example const createUser = async (e) => { e.preventDefault(); try { await userValidationSchema.validate(input); setSuccess("Success"); } catch (Err) { const { errors } = Err; setError(errors); } };
Yub used for FE or BE?
Can we validate input type="file" with yup?
wenardo el tutorial +1000
where are the custom messages when an error occur you didn't show anything in this video
how can i see the error messages?
That's all good, but make everything much more complex. Why not just only change type="text" to type="email" and add an attribute of required
@PedroTechnologies
3 жыл бұрын
So, I would not trust html validation cause its extremely simple to bypass. People can trigger api requests without touching the client, not to mention that someone can easily do inspect element and remove the require. So form validation is really important for both the frontend and backend.
@alimkhanfthl7846
3 жыл бұрын
@@PedroTechnologies thanks 🖤
How to make 1 character upper case in validation
Donth you think that useForm is better?)
@PedroTechnologies
3 жыл бұрын
YUP is mainly used just for validation while useForm is used for form creation, I would say my favorite is YUP + Formik
Never seen 5K changes in git before. LOL
@PedroTechnologies
3 жыл бұрын
Lmaoo
great
Muito bom.obrigado.
@PedroTechnologies
3 жыл бұрын
Obrigado! Fico feliz que gostou!
Yayyyy
nice!
where is the code??????????????
pathetic
const validationForm = Yup.object().shape({ DateTime:Yup.date().required('Date and time is required') }); Even after selecting the date and time it is showing required.
{2022-11-14}