Form Validation In React Using YUP Tutorial

Поделиться
HTML-код
  • Опубликовано: 8 янв 2025

Комментарии • 98

  • @sarthak290
    @sarthak290 Год назад +5

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

    • @СашаАлександр-е4м
      @СашаАлександр-е4м 4 месяца назад

      I think a year later, you are guessed that lib using with the react hook form but the alone using very rary

  • @f3-faithfitnessfinance
    @f3-faithfitnessfinance 4 года назад +3

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

    • @PedroTechnologies
      @PedroTechnologies  4 года назад +1

      Lets gooo bro! I can't believe how fast the channel is growing hahaha Thank you for being here since the beginning!

    • @DavidChuksPatrick
      @DavidChuksPatrick 6 месяцев назад

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

  • @bernardopapini
    @bernardopapini 4 года назад +16

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

  • @abrahamokezie4320
    @abrahamokezie4320 3 года назад +2

    keep posting man i love your videoss

  • @RenardBergson
    @RenardBergson Год назад

    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.

  • @salahashraf2337
    @salahashraf2337 4 года назад +1

    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  4 года назад +1

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

  • @nasserhossam1
    @nasserhossam1 3 года назад +2

    Great and short explanation, thanks

  • @jeffmuts
    @jeffmuts Год назад

    Very well put. Simple and clear. Thanks

  • @matthewparsons9407
    @matthewparsons9407 Год назад +2

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

  • @codito7388
    @codito7388 4 года назад +1

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

    • @codito7388
      @codito7388 4 года назад +1

      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  4 года назад

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

  • @ferrariDev
    @ferrariDev 2 года назад

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

  • @Bread-vk8fl
    @Bread-vk8fl 11 месяцев назад

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

  • @egzonberisha9906
    @egzonberisha9906 3 года назад +1

    Thats way easier than Regex, thanks man

  • @devopssimon
    @devopssimon Год назад +1

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

  • @ThColinPereira
    @ThColinPereira 3 года назад

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

  • @ilhamadiputra4745
    @ilhamadiputra4745 4 года назад +1

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

  • @staaiik
    @staaiik 3 года назад +3

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

  • @Alex-xe6bl
    @Alex-xe6bl 3 года назад +2

    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

  • @HuyLe-tc4mx
    @HuyLe-tc4mx 3 года назад +2

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

  • @nicholassmith6412
    @nicholassmith6412 3 года назад

    quick and to the point, thanks

  • @radomirmijovic2605
    @radomirmijovic2605 3 года назад

    Thanks man, this is great!

  • @hk_driving3178
    @hk_driving3178 4 года назад +3

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

    • @current5
      @current5 4 года назад +3

      yes please

    • @PedroTechnologies
      @PedroTechnologies  4 года назад +1

      Hey, I actually have 3 videos on the topic using React Node and MySQL! Here is the link to the playlist: ruclips.net/p/PLpPqplz6dKxVC1RlVMH_LcZz2vUheC1-i

    • @hk_driving3178
      @hk_driving3178 4 года назад

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

  • @okage_
    @okage_ Год назад

    thank you! really helpful video

  • @TajaHouse
    @TajaHouse Год назад

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

  • @lologachupin9207
    @lologachupin9207 3 года назад

    Very helpful. Gracias Señor!

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

  • @bhatiashivam
    @bhatiashivam 4 года назад +2

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

    • @PedroTechnologies
      @PedroTechnologies  4 года назад +1

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

    • @bhatiashivam
      @bhatiashivam 4 года назад

      @@PedroTechnologies thank you

  • @manujamadushan9471
    @manujamadushan9471 3 года назад

    Well explained, Thank you 😊

  • @zhichengyu950
    @zhichengyu950 4 года назад +2

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

    • @PedroTechnologies
      @PedroTechnologies  4 года назад

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

    • @zhichengyu950
      @zhichengyu950 4 года назад

      @@PedroTechnologies Thanks a lot bro!

  • @devmts
    @devmts Год назад

    ingles brabo mano, bom video!

  • @Abdullah-uv9nk
    @Abdullah-uv9nk 4 года назад +1

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

    • @PedroTechnologies
      @PedroTechnologies  4 года назад

      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 4 года назад

      @@PedroTechnologies Awesome, thank you!

  • @matheusmartinez5455
    @matheusmartinez5455 4 года назад +1

    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  4 года назад +1

      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!

  • @Martin-kd2rf
    @Martin-kd2rf 2 года назад

    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!

  • @rayvincentdelacruz8251
    @rayvincentdelacruz8251 4 года назад +1

    Great man!

  • @deadshotxi3970
    @deadshotxi3970 4 года назад +3

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

  • @nymst
    @nymst 3 года назад

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

    • @tech3425
      @tech3425 2 года назад

      Still waitin on that

  • @arazmammadov9276
    @arazmammadov9276 2 года назад

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

  • @neerajkanojiya8098
    @neerajkanojiya8098 2 года назад

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

  • @sachinthaheshan389
    @sachinthaheshan389 3 года назад +1

    Good job!

  • @johnconnor9787
    @johnconnor9787 3 года назад

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

  • @nages1549
    @nages1549 3 года назад

    Yub used for FE or BE?

  • @BaneCodes
    @BaneCodes Год назад

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

  • @Sam-kr5ix
    @Sam-kr5ix 3 года назад

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

  • @arihantjain8347
    @arihantjain8347 Год назад

    Issue is formik cannot have nested forms

  • @mihrankhachatryan3693
    @mihrankhachatryan3693 3 года назад +1

    Donth you think that useForm is better?)

    • @PedroTechnologies
      @PedroTechnologies  3 года назад +1

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

  • @momenzidan9505
    @momenzidan9505 Год назад

    you are the best.

  • @alimkhanfthl7846
    @alimkhanfthl7846 4 года назад +1

    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  4 года назад +2

      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 4 года назад

      @@PedroTechnologies thanks 🖤

  • @yogeshworld
    @yogeshworld 3 года назад

    How to make 1 character upper case in validation

  • @isaacsarte2708
    @isaacsarte2708 3 года назад

    how can i see the error messages?

  • @afonsoramon6798
    @afonsoramon6798 2 года назад

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

  • @richardramirez5746
    @richardramirez5746 9 месяцев назад

    cool mr Pidhro

  • @shucheendrat.m6024
    @shucheendrat.m6024 4 года назад +1

    Super sir

  • @27sosite73
    @27sosite73 Год назад

    well well well
    nice!

  • @houssemeddinezekri6016
    @houssemeddinezekri6016 8 месяцев назад

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

  • @marceloveron2393
    @marceloveron2393 2 года назад

    wenardo el tutorial +1000

  • @asimgiri4269
    @asimgiri4269 3 года назад +1

    Never seen 5K changes in git before. LOL

  • @matheusmartinez5455
    @matheusmartinez5455 4 года назад +1

    Muito bom.obrigado.

  • @vd7533
    @vd7533 3 года назад

    nice!

  • @akashshrestha01
    @akashshrestha01 3 года назад

    great

  • @Shellflower1234
    @Shellflower1234 4 года назад +1

    Yayyyy

  • @kacperkepinski4990
    @kacperkepinski4990 11 месяцев назад

    pathetic

  • @sktraveltales
    @sktraveltales 2 года назад

    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 2 года назад

    {2022-11-14}