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

  • @sarthak290
    @sarthak290 Жыл бұрын

    Finally a video which talks about YUP, no more, no less. And especially not some form library I don't care about

  • @f3-faithfitnessfinance
    @f3-faithfitnessfinance3 жыл бұрын

    Congrats on 2k man🔥🔥 It was quick from 1k to 2k Let's go let's go!!!!💪

  • @PedroTechnologies

    @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

    @DavidChuksPatrick

    Ай бұрын

    🎉🎉3 years later. The growth is massive ❤205k

  • @bernardopapini
    @bernardopapini3 жыл бұрын

    Explicação precisa, inglês impecável. Parabéns, Pedro. E obrigado pelo vídeo!

  • @PedroTechnologies

    @PedroTechnologies

    3 жыл бұрын

    Fico feliz que gostou!

  • @abrahamokezie4320
    @abrahamokezie43203 жыл бұрын

    keep posting man i love your videoss

  • @PedroTechnologies

    @PedroTechnologies

    3 жыл бұрын

    More to come!

  • @RenardBergson
    @RenardBergson7 ай бұрын

    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.

  • @nasserhossam1
    @nasserhossam13 жыл бұрын

    Great and short explanation, thanks

  • @PedroTechnologies

    @PedroTechnologies

    3 жыл бұрын

    Glad it was helpful!

  • @deadshotxi3970
    @deadshotxi39703 жыл бұрын

    The name should be string, Elon musk child will be 👀👄👀

  • @PedroTechnologies

    @PedroTechnologies

    3 жыл бұрын

    Lmaoo

  • @matthewparsons9407
    @matthewparsons9407 Жыл бұрын

    Hey pedro, how can you display custom error messages using this?

  • @jeffmuts
    @jeffmuts Жыл бұрын

    Very well put. Simple and clear. Thanks

  • @Igor-vk8fl
    @Igor-vk8fl6 ай бұрын

    Salvou a patria!! Bom pra não deixar sem nenhuma validação no começo.

  • @egzonberisha9906
    @egzonberisha99063 жыл бұрын

    Thats way easier than Regex, thanks man

  • @PedroTechnologies

    @PedroTechnologies

    3 жыл бұрын

    You bet, glad to help!

  • @ilhamadiputra4745
    @ilhamadiputra47453 жыл бұрын

    great work! time to implement this to my little use-case project xD

  • @PedroTechnologies

    @PedroTechnologies

    3 жыл бұрын

    Thakn you!

  • @HuyLe-tc4mx
    @HuyLe-tc4mx3 жыл бұрын

    Can I ask the name of the theme extension you used in this video?

  • @PedroTechnologies

    @PedroTechnologies

    3 жыл бұрын

    Hey, I believe I used Andromeda in this video!

  • @ThColinPereira
    @ThColinPereira3 жыл бұрын

    Wooooooooooooooooooooooooooooooow! Great video pedro, this helped me so much! I appreciate your kind help sir

  • @staaiik
    @staaiik3 жыл бұрын

    Cara é incrivel, eu consegui treinar o meu ingles e fazer a validação, você é foda!

  • @PedroTechnologies

    @PedroTechnologies

    3 жыл бұрын

    kkkkkk muito bom! Fico feliz :)

  • @nicholassmith6412
    @nicholassmith64123 жыл бұрын

    quick and to the point, thanks

  • @radomirmijovic2605
    @radomirmijovic26053 жыл бұрын

    Thanks man, this is great!

  • @codito7388
    @codito73883 жыл бұрын

    1 like from codito because you deserve it!!!!

  • @codito7388

    @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

    @PedroTechnologies

    3 жыл бұрын

    Thank you bro! I like ur videos too, u make great content!

  • @bhatiashivam
    @bhatiashivam3 жыл бұрын

    How can I add another input field to confirm password and check if the 2 passwords match?

  • @PedroTechnologies

    @PedroTechnologies

    3 жыл бұрын

    This explains pretty well: til.hashrocket.com/posts/vahuw4phan-check-the-password-confirmation-with-yup

  • @bhatiashivam

    @bhatiashivam

    3 жыл бұрын

    @@PedroTechnologies thank you

  • @ferrariDev
    @ferrariDev2 жыл бұрын

    Valeu demais!! Estava morrendo tentando validar o email por REGEX. Me salvou!! Valeu demais!!

  • @salahashraf2337
    @salahashraf23373 жыл бұрын

    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

    @PedroTechnologies

    3 жыл бұрын

    Thank you man! Really happy am am being able to help you!

  • @okage_
    @okage_ Жыл бұрын

    thank you! really helpful video

  • @devmts
    @devmts8 ай бұрын

    ingles brabo mano, bom video!

  • @Alex-xe6bl
    @Alex-xe6bl2 жыл бұрын

    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

    @kevyyar

    2 жыл бұрын

    Yup!

  • @TajaHouse
    @TajaHouse8 ай бұрын

    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. 😊

  • @hk_driving3178
    @hk_driving31783 жыл бұрын

    Hi , Can you please make a video on Login and profile functionality by using MySQL node and react

  • @current5

    @current5

    3 жыл бұрын

    yes please

  • @PedroTechnologies

    @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

    @hk_driving3178

    3 жыл бұрын

    @@PedroTechnologies thanks... really helpful 👍❤️

  • @lologachupin9207
    @lologachupin92073 жыл бұрын

    Very helpful. Gracias Señor!

  • @manujamadushan9471
    @manujamadushan94712 жыл бұрын

    Well explained, Thank you 😊

  • @olawumisegun5898
    @olawumisegun5898 Жыл бұрын

    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?

  • @sachinthaheshan389
    @sachinthaheshan3893 жыл бұрын

    Good job!

  • @matheusmartinez5455
    @matheusmartinez54553 жыл бұрын

    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

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

  • @rayvincentdelacruz8251
    @rayvincentdelacruz82513 жыл бұрын

    Great man!

  • @PedroTechnologies

    @PedroTechnologies

    3 жыл бұрын

    Thank you! Glad you liked it!

  • @richardramirez5746
    @richardramirez57464 ай бұрын

    cool mr Pidhro

  • @zhichengyu950
    @zhichengyu9503 жыл бұрын

    Great tutorial. I really hope you can make a tutorial for email verification after sign up.

  • @PedroTechnologies

    @PedroTechnologies

    3 жыл бұрын

    Hi, yes this video is on the plans! I am thinking of releasing it this week!

  • @zhichengyu950

    @zhichengyu950

    3 жыл бұрын

    @@PedroTechnologies Thanks a lot bro!

  • @momenzidan9505
    @momenzidan9505 Жыл бұрын

    you are the best.

  • @27sosite73
    @27sosite73 Жыл бұрын

    well well well nice!

  • @Abdullah-uv9nk
    @Abdullah-uv9nk3 жыл бұрын

    Hi Pedro, can you please make a video on React Bootstrap, Saas and styled components? Currently having trouble with these.

  • @PedroTechnologies

    @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

    @Abdullah-uv9nk

    3 жыл бұрын

    @@PedroTechnologies Awesome, thank you!

  • @Martin-kd2rf
    @Martin-kd2rf2 жыл бұрын

    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!

  • @devopssimon
    @devopssimon Жыл бұрын

    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) }

  • @afonsoramon6798
    @afonsoramon6798 Жыл бұрын

    I was watching the video when you put "Machado" in the email I knew you were Brazilian lol

  • @arazmammadov9276
    @arazmammadov92762 жыл бұрын

    Cool ending music, but I couldn't find the top right corner video

  • @arihantjain8347
    @arihantjain8347 Жыл бұрын

    Issue is formik cannot have nested forms

  • @shucheendrat.m6024
    @shucheendrat.m60243 жыл бұрын

    Super sir

  • @BaneCodes
    @BaneCodes Жыл бұрын

    Nice tutorial but Where is the video for formik and yup?

  • @nymst
    @nymst3 жыл бұрын

    Heya, would u mind sharing what VSC theme u're using? Thanks in advance

  • @tech3425

    @tech3425

    2 жыл бұрын

    Still waitin on that

  • @neerajkanojiya8098
    @neerajkanojiya80982 жыл бұрын

    Explained very well, only thing is: How I can show error indication or messages?

  • @dheerajtp5757

    @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); } };

  • @nages1549
    @nages15493 жыл бұрын

    Yub used for FE or BE?

  • @johnconnor9787
    @johnconnor97872 жыл бұрын

    Can we validate input type="file" with yup?

  • @marceloveron2393
    @marceloveron23932 жыл бұрын

    wenardo el tutorial +1000

  • @Sam-kr5ix
    @Sam-kr5ix3 жыл бұрын

    where are the custom messages when an error occur you didn't show anything in this video

  • @isaacsarte2708
    @isaacsarte27082 жыл бұрын

    how can i see the error messages?

  • @alimkhanfthl7846
    @alimkhanfthl78463 жыл бұрын

    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

    @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

    @alimkhanfthl7846

    3 жыл бұрын

    @@PedroTechnologies thanks 🖤

  • @yogeshworld
    @yogeshworld2 жыл бұрын

    How to make 1 character upper case in validation

  • @mihrankhachatryan3693
    @mihrankhachatryan36933 жыл бұрын

    Donth you think that useForm is better?)

  • @PedroTechnologies

    @PedroTechnologies

    3 жыл бұрын

    YUP is mainly used just for validation while useForm is used for form creation, I would say my favorite is YUP + Formik

  • @asimgiri4269
    @asimgiri42693 жыл бұрын

    Never seen 5K changes in git before. LOL

  • @PedroTechnologies

    @PedroTechnologies

    3 жыл бұрын

    Lmaoo

  • @akashshrestha01
    @akashshrestha012 жыл бұрын

    great

  • @matheusmartinez5455
    @matheusmartinez54553 жыл бұрын

    Muito bom.obrigado.

  • @PedroTechnologies

    @PedroTechnologies

    3 жыл бұрын

    Obrigado! Fico feliz que gostou!

  • @Shellflower1234
    @Shellflower12343 жыл бұрын

    Yayyyy

  • @vd7533
    @vd75332 жыл бұрын

    nice!

  • @houssemeddinezekri6016
    @houssemeddinezekri60163 ай бұрын

    where is the code??????????????

  • @kacperkepinski4990
    @kacperkepinski49906 ай бұрын

    pathetic

  • @sktraveltales
    @sktraveltales2 жыл бұрын

    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.

  • @Pareshbpatel
    @Pareshbpatel Жыл бұрын

    {2022-11-14}