Валидация форм с react-hook-form в React-приложениях

Поділитися
Вставка
  • Опубліковано 12 лис 2024

КОМЕНТАРІ • 117

  • @gritsienkooleg3447
    @gritsienkooleg3447 2 роки тому +25

    Для того, чтобы грамотно и без воды объяснить суть на понятных примерах, нужно хорошо разобраться в теме. Что у вас прекрасно получается) Спасибо за ваш профессионализм, Михаил!

  • @yevgenymakkaveev7708
    @yevgenymakkaveev7708 2 роки тому +34

    Большое спасибо за ваши видео и курсы. Во многом благодаря им получил вчера первый оффер!

    • @mishanep
      @mishanep  2 роки тому +5

      Поздравляю, Евгений!
      Очень рад за вас!

    • @Sashaa
      @Sashaa Рік тому

      сколько учился до первого офера?
      как сейчас дела?

    • @yevgenymakkaveev7708
      @yevgenymakkaveev7708 Рік тому +1

      @@Sashaa Привет, только увидел оповещение об ответе.
      Учился я с большими перерывами, но активной учебы было пол года, прямо сутками сидел уже сам. До этого были курсы, в числе их и занятие у автора канала, которые задали вектор, но полностью погрузится тогда не удалось и если честно далеко не все понял в полной мере, что читали. Наверное тут главно не бросать и не ждать что с первого раза все усвоится. Хорошо если и будет так, но мне кажется во многом влитая в первые ошибки и сломанные программы ты начинаешь куда лучше понимать как сделать что бы работало, а уже потом учишься делать что бы и работало и было красиво и правильно.
      Сейчас дела относительно неплохо, работаю в стартапе с довольно интересными проектами.

    • @Sashaa
      @Sashaa Рік тому +1

      @@yevgenymakkaveev7708 спасибо, удачи вам!

    • @ДюнкеркНоланович
      @ДюнкеркНоланович Рік тому +2

      Добрый вечер! Подскажите, как искали работу. Есть ли у вас портфолио? Что было на собеседовании?
      Когда захожу на hh и смотрю требования, то думаю, что никогда не найду работу

  • @Gombo_Batuev
    @Gombo_Batuev 7 місяців тому

    Как же грамотно все объяснено. Спасибо вам за такую работу!

  • @НиколайРумянцев-д5у
    @НиколайРумянцев-д5у 4 місяці тому +1

    Михаил, большое спасибо за видео! Все очень понятно и без воды.

  • @vladimirplyukhin5234
    @vladimirplyukhin5234 2 роки тому +7

    Михаил, большая честь учиться по Вашим урокам. Очень эффективно.

  • @ТатьянаРусак-ш5ю
    @ТатьянаРусак-ш5ю 2 роки тому +4

    Коротко и очень понятно. Здорово объясняете!! Спасибо вам, Михаил!!

  • @Эльвира-я5э4и
    @Эльвира-я5э4и 2 роки тому

    Спасибо! Устала искать ошибку, почему все не работало, а тут одно видео и счастье

  • @darkcasper1488
    @darkcasper1488 Рік тому +1

    Михаил, спасибо Вам огромное за ваши видео уроки!!!!

  • @mariabogdanova9759
    @mariabogdanova9759 2 роки тому +1

    Большое спасибо! Все очень понятно, можно быстро разобраться) И отдельное спасибо за приятную речь и отсутствие воды)

  • @purplebaby15
    @purplebaby15 Рік тому

    Отличная подача, обращение к документации.Думаю будет понятно даже чайникам которые ещё даже не работали с React'ом.Спасибо

  • @mrrappbit
    @mrrappbit 10 місяців тому +1

    Михаил, у вас очень классные видео, все подробно и понятно, спасибо ❤

  • @HumoyunAhmedov-g9r
    @HumoyunAhmedov-g9r 9 місяців тому +1

    Профессионал своего дела😎, спасибо вам

  • @thomasmanov
    @thomasmanov 2 роки тому +1

    Спасибо огромнейшее за контент! С удовольствием смотрю новые видео и иногда возвращаюсь к старым, каждый раз нахожу ту информацию что искал, а так же что то новое! От души.

  • @twentysixhugs
    @twentysixhugs 2 роки тому +1

    Очень хорошо рассказываешь, что позволяет быстро во всем разобраться. Спасибо.

  • @elenaizmaylova9331
    @elenaizmaylova9331 2 роки тому +1

    Просто отличнейшее объяснение!!! Спасибо огромное! Всего Вам самого наилучшего!

  • @annabielskaya1626
    @annabielskaya1626 6 місяців тому

    Спасибо за видео - подача просто шикарная, очень помогло 🔥

  • @СергейПетров-б4щ4ч

    Спасибо! Кратко и понятно. На первый взгляд проще чем Formik

  • @victormog
    @victormog 2 роки тому +16

    Спасибо!
    Если будет возможность, расскажи, пожалуйста, про использование отдельных библиотек валидации и интернационализации в React.

  • @_oxios_
    @_oxios_ 2 роки тому +6

    Спасибо за обзор и примеры) Было бы интересно посмотреть уроки по углубленной работе с хукФорм.

  • @maxgib2489
    @maxgib2489 Рік тому

    Мне это напомнило чём-то работу с Form от старого AntD, ролик бомба!

  • @nh42so42
    @nh42so42 Рік тому

    очень хороший гайд, спасибо!

  • @АлексейСтепанов-к9о

    Михаил, спасибо за урок. Очень полезная библиотека. Обязательно буду использовать ее в своих проектах.

  • @Natalia-ph
    @Natalia-ph 2 роки тому

    Спасибо за столь полезную информацию

  • @майнкрафт-к2и
    @майнкрафт-к2и Рік тому

    Ой ой ой! Красавчик! Лайк за крутое объяснение!

  • @zahodiChe
    @zahodiChe 9 місяців тому

    Спасибо! То, что я искал

  • @Denis-pu4bt
    @Denis-pu4bt 2 роки тому +1

    Библиотека обновилась и ваш урок очень кстати, спасибо за вашу работу, лайк и подписка)

  • @vladislav_pikiner
    @vladislav_pikiner 2 роки тому

    самый недооценённый канал на ютубе по тематике)

  • @gulzatkoshbaeva2162
    @gulzatkoshbaeva2162 4 місяці тому

    Thank you, very easy to catch up.

  • @sergeyvarfolomeev2627
    @sergeyvarfolomeev2627 2 роки тому

    Спасибо, Мужик! Очень круто! Мой инглиш оставляет желать лучшего и без твоего урока, так и не смог нормально прочитать документацию, а переводчик просто ЖЖЁТ и путает еще сильнее

  • @ДеткиеНочники
    @ДеткиеНочники 2 роки тому

    Спасибо за видео, то что нужно!

  • @dmitriymovchan6563
    @dmitriymovchan6563 2 роки тому

    О, я как раз сейчас впервые на проекте начал испольтзовать react-hook-form.

  • @vichislav_tv
    @vichislav_tv Рік тому

    отличная информация отлично подана, спасибо большое!

  • @Bliqu1
    @Bliqu1 2 роки тому

    Спасибо большое за ролик, очень много времени сэкономили

  • @МахабатБактыбеккызы-т7д

    Ну ты парен гигант, 💣❤‍🔥👌💪👋👏

  • @Рельныйобзор
    @Рельныйобзор 9 місяців тому

    спасибо очань чётка коротко и ясно

  • @Астролайф-э9ю
    @Астролайф-э9ю Рік тому

    Был очень полезен!

  • @Zubairavvv
    @Zubairavvv 2 роки тому

    Михаил спасибо за ваши видео очень понятные и полезные, удачи вам!

  • @RonaMelone
    @RonaMelone 2 роки тому

    Михаил, это чудесно! Мне больше понравилось, чем видео на оф. сайте. Плюс ваша ремарка о поддержке UI-библиотек оказалась весьма кстати. Не нашла на их сайте, а вы нашли. Спасибо😘

  • @jakema4o
    @jakema4o Рік тому

    Супер мега харош

  • @alexanderwebdev5558
    @alexanderwebdev5558 2 роки тому

    Михаил спасибо вам за ваши видео!!! Много смотрел и учился по разным видео но ваши видео и объяснения очень помогли !!!

  • @АлександрСосо-щ1б
    @АлександрСосо-щ1б 2 роки тому

    Спасибо за урок!

  • @ИванДанилов-д5р
    @ИванДанилов-д5р 2 роки тому

    ОООО СПЕР ! я как раз делаю тестовое и там требуют использовать RHF. Так то основное уже запилил, но будет здорово проверить себя и допилить. Ставлю лайк и начинаю смотреть.

  • @force_of_abstinence
    @force_of_abstinence 2 роки тому

    Спасибо, пригодилось на проекте!))

  • @olehy5000
    @olehy5000 2 роки тому

    Спасибо! Возьму на вооружение. Намного проще чем формик и юп).

  • @ПавелКуликов-щ5о
    @ПавелКуликов-щ5о 2 роки тому

    Очень помогли. Спасибо.

  • @Aegon_Targarien
    @Aegon_Targarien 2 роки тому +3

    Расскажите пожалуйста как пользоваться eslint+prettier в проектах

  • @sergeykudryashov9097
    @sergeykudryashov9097 2 роки тому

    Спасибо за ролик. Все очень понятно

  • @viktornaymayer8882
    @viktornaymayer8882 2 роки тому

    Спасибо, отличная подача материала :)

  • @newfeel.305
    @newfeel.305 Рік тому

    Супер!

  • @shoxerpetrosyan8678
    @shoxerpetrosyan8678 2 роки тому

    spasibo za video,,!!!!!

  • @ВладимирК-в7о
    @ВладимирК-в7о 2 роки тому

    Спасибо. Очень крутое видео)

  • @nikomunikabelen8540
    @nikomunikabelen8540 Рік тому

    спасибо!

  • @olfi1728
    @olfi1728 2 роки тому

    Спасибо, всё чётко и понятно.

  • @mv_19v77
    @mv_19v77 2 роки тому

    Nice tutorial.... Very helpful

  • @arthurq7843
    @arthurq7843 10 місяців тому

    Что популярнее React Hook Form или Formik?

  • @mak_whisk
    @mak_whisk Рік тому

    Спасибо

  • @ninshu1138
    @ninshu1138 2 роки тому

    Что думаешь про antd forms? Если в проекте уже есть antd, стоит ли тянуть еще либу для управления формами?

  • @МаксимЛибер-ф2н
    @МаксимЛибер-ф2н 2 роки тому +1

    Ещё из плюсов - она хорошо работает в связке с yup

  • @SerhiiNesterov
    @SerhiiNesterov 2 роки тому

    Спасибо!

  • @norwinlol
    @norwinlol 2 роки тому

    Лайк не глядя)

  • @СлавикГусев-л4и
    @СлавикГусев-л4и 2 роки тому

    Спасибо за объяснения , подскажите пожалуйста есть инпут пароля и при клике на иконку , надо поменять type инпута , как правильно будет обратиться к нему ? Пока сложно перейти с чистого js в react

    • @mishanep
      @mishanep  2 роки тому +1

      Попробуйте через ref. Посмотрите в сторону хука useRef

  • @never.m1nd
    @never.m1nd 3 місяці тому

    Спасибо за ролик, действительно упрощает работу! Михаил, насколько правильным является валидация форм через redux tool kit? Складывать при изменения формы ошибки и значения в стейт и доставать в нужно месте? Кто то пишет, что это плохая практика, кто то нормальная. Вы как считает?

    • @mishanep
      @mishanep  3 місяці тому +1

      Приветствую. Смотря что вы считаете правильным местом. Если информация об ошибках внутри самой формы, то редакс будет избыточен. Если во всплывающем окне, например, то может быть оправдано.

    • @never.m1nd
      @never.m1nd 3 місяці тому

      @@mishanep Спасибо! Я просто наткнулся на такую библиотеку как redux form, как оказалось автор свернул работу по ней со словами Generally, please don't store live form data in Redux. Поэтому я подумал может редакс вообще не подходит под живую валидацию.

  • @MrDobro1214
    @MrDobro1214 Рік тому

    Добрый день. Спасибо большое за видео. А с Валидацией пароля будет такая же логика?

    • @MrDobro1214
      @MrDobro1214 Рік тому

      Или к примеру я хочу сделать проверку пользователя, "Введены некорректные данные" или же "Данный пользователь уже зарегистрирован" или "Некорректный логин или пароль"

  • @thehuman9604
    @thehuman9604 Рік тому

    Сделай плизвидео про RHF + Yup. Для примера думаю идеально подойдет форма регистрации с несколькими шагами. Спасибо

  • @Norby-Norby
    @Norby-Norby 2 роки тому

    Подскажите пож как можно разделить форму, чтоб разбить по компонентам и в отдельном файлике прописать валидацию к инпутам? Сам уже несколько дней ковыряю - одна сплошная ошибка (ругается на реф, не видит валидацию). Может было бы проще, но я использовал материал юай в довесок :))). Документация хук форм тяжело дается, английский слабоват.
    П.С. Спасибище за крутяцкий контент. Все мега доступно, понятно и конструктивно)

    • @SAID-bb6zv
      @SAID-bb6zv 11 місяців тому

      да но почему когда прописываю (const {} = useForm()) вечно ругается на useRef если даже я его не прописывал

  • @fellow3251
    @fellow3251 2 роки тому

    Hola! Подскажите пожалуйста, куда необходимо прописать функцию, которая отправляет данные(email, password) для авторизации?

    • @mishanep
      @mishanep  2 роки тому +1

      Hola!
      Если правильно понимаю задачу, то в хэндлер сабмита формы.

  • @dmytrovoronov9320
    @dmytrovoronov9320 2 роки тому

    Теперь не хватает Formik и Yup ))

  • @velikorossnationalist4259
    @velikorossnationalist4259 2 роки тому

    А стили к форме какие применили?

  • @bigboy3085
    @bigboy3085 2 роки тому +3

    Миша, пожалуйста, сделай видео по React-Query.
    Твои примеры и объяснения с наслаждением смотришь, а на русском сегменте Ютуба про эту библиотеку ничего нет, либо говно снимают)

    • @mishanep
      @mishanep  2 роки тому

      Никогда не работал c React Query, только с похожим на него RTK Query, что вместе с Redux Toolkit идет (на канале есть видео про него).

  • @magaboy7232
    @magaboy7232 2 роки тому

    а как передавать значения во вложенные элементы
    ?

  • @SmirnovYT
    @SmirnovYT Рік тому

    Спасибо! Ребят кто подскажет, что значит знак вопроса(errors?.firstName?. и тд) или это тернарное выражение? Просто не особо понимаю логику написания его тут.

    • @promoabys
      @promoabys Рік тому +1

      Это из TypeScript
      ?. оператор для доступа к необязательным свойствам
      TypeScript может немедленно остановить выполнение некоторых выражений, если мы столкнемся с нулевым или неопределенным значением.
      В ином случае будет ошибка вылетать об отсутствии данных.

    • @SmirnovYT
      @SmirnovYT Рік тому

      @@promoabys Спасибо)

  • @alexmelentev9161
    @alexmelentev9161 2 роки тому

    а подскажите кто-нибудь как сделать чтобы при первом рендере поля, которые необходимо заполнить выделялись как-то, ну точнее чтобы ошибка "поле необходимо заполнить" появлялась сразу при открытии страницы, а не после клика на инпут, потому что формы бывают большими и кнопка задисэйблена, но какое поле точно нужно ввести не понятно, HELP anybody!

  • @cliveriddell5700
    @cliveriddell5700 2 роки тому

    Добрый день, Михаил. Будет ли обучающее видео по redux-saga?

    • @mishanep
      @mishanep  2 роки тому

      Пока не планирую. Видел в сети в этом году целый цикл на эту тему, и повторяться не хочу. Точно где не скажу, мне в твиттер ленте вылетали выпуски, их там более десятка по саге.

  • @евгенийбогданов-щ1б

    Михаил. будут ли видео о formik?

  • @diyaz_mukhanov
    @diyaz_mukhanov 2 роки тому

    А почему обязательно нужно поставить знак вопроса чтобы работало? errors.login?.type

    • @mishanep
      @mishanep  2 роки тому +1

      Затем что если у вас не будет ошибки в поле login, то error.login будет равен undefined, а при попытке запросить в таком случае errors.login?.type приведет к ошибке. Потому что у undefined не может быть никаких ключей через точку. Такая запись называется optional chainig и является современной альтернативой проверки errors.login && errors.login.type

    • @diyaz_mukhanov
      @diyaz_mukhanov 2 роки тому

      @@mishanep Спасибо за разъяснение!

  • @Asgyr
    @Asgyr 2 роки тому

    а есть урок или будет урок с методом входа в приложение через jwt token ?

    • @mishanep
      @mishanep  2 роки тому

      Есть базовый пример авторизации через Firebase ua-cam.com/video/ivtbRBEjLW8/v-deo.html
      Там упрощенный вариант jwt.

  • @Chambo015
    @Chambo015 2 роки тому

    Вопрос, а как бороться с пробелами ? Если вместо 5 символов передали 5 пробелов

    • @mishanep
      @mishanep  2 роки тому +1

      В js для строк есть метод trim, который очищает лишние пробелы.

    • @Chambo015
      @Chambo015 2 роки тому

      @@mishanep Уже нашел решение с помощью setValue и там делаю trim(). Чтобы валидация не учитывала пробелы как символ

  • @maxet2374
    @maxet2374 2 роки тому

    Оч логично написать то же но с сохранением состояния в Redux

  • @diggerdog001
    @diggerdog001 11 місяців тому

    А на чистом JS кто нибудь щас пишет валидацию формы в продакшене?

    • @mishanep
      @mishanep  11 місяців тому

      Конечно. Немало сайтов, вообще не использующих фреймворки - одна ванилла. Оно сложнее, но работает обычно быстрее.

  • @svetultus_
    @svetultus_ 2 роки тому

    Хорошее видео, но очень мелко - пытка для глаз

  • @SergeyPerestoronin
    @SergeyPerestoronin 2 роки тому +1

    А библиотека для валидации форм оказалась не такой уж непонятной. До этого всегда писал валидацию самостоятельно.)

    • @mishanep
      @mishanep  2 роки тому

      Да, очень удобно :)

  • @anonymousNouname
    @anonymousNouname 2 роки тому

    Для type="url" нет валидации. Чтоб она работала надо добавить инпуту type="url" и minLength в register, указать номер не меньше 5, вот так:
    тогда будет доступен typeMismatch

    • @anonymousNouname
      @anonymousNouname 2 роки тому

      и еще... mode: 'onChange' не будет работать, если у инпута стоит обработчик 'onChange'

    • @mishanep
      @mishanep  2 роки тому +1

      Там onChange тоже по-хитрому можно задавать. Можно добавить свою обработку, сохранив ту, что использует библиотека. В документации были соответствующие примеры. По поводу url, лучше наверное регулярку правильную подобрать.

  • @unknown.6914
    @unknown.6914 8 місяців тому

    Отличное обьяснение, спасибо!

  • @КонстантинПервый-ы4э

    Супер! Спасибо Вам большое!

  • @АнастасияШелухина-з7е

    огромное спасибо - это прекрасное и очень толковое объяснение))

  • @armorunit6970
    @armorunit6970 2 роки тому

    Спасибо!