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

  Рет қаралды 68,838

Михаил Непомнящий

Михаил Непомнящий

Күн бұрын

Библиотека react-hook-form упрощает создание и обработку форм в React-приложениях. Быстро, просто и эффективно.
00:00 Актуальность библиотеки форм
01:09 Создание проекта
01:41 Хук useForm
03:09 Обработчик отправки формы
04:06 Обязательное поле ввода
06:09 Вывод сообщения об ошибке
08:20 Несколько условий валидации
10:08 Валидация на onBlur
11:18 Очистка формы после отправки
12:29 Обзор API
13:55 Блокировка кнопки отправки
14:47 Поддержка UI-библиотек
Мои курсы по вебу с купонами:
✅ mishanep.com/
📢 Поддержка канала:
www.tinkoff.ru/rm/nepomnyasch...
paypal.me/mishanep

Пікірлер: 112
@user-bx7rm2rp9g
@user-bx7rm2rp9g 4 күн бұрын
Михаил, большое спасибо за видео! Все очень понятно и без воды.
@gritsienkooleg3447
@gritsienkooleg3447 Жыл бұрын
Для того, чтобы грамотно и без воды объяснить суть на понятных примерах, нужно хорошо разобраться в теме. Что у вас прекрасно получается) Спасибо за ваш профессионализм, Михаил!
@thomasmanov
@thomasmanov 2 жыл бұрын
Спасибо огромнейшее за контент! С удовольствием смотрю новые видео и иногда возвращаюсь к старым, каждый раз нахожу ту информацию что искал, а так же что то новое! От души.
@vladimirplyukhin5234
@vladimirplyukhin5234 2 жыл бұрын
Михаил, большая честь учиться по Вашим урокам. Очень эффективно.
@yevgenymakkaveev7708
@yevgenymakkaveev7708 2 жыл бұрын
Большое спасибо за ваши видео и курсы. Во многом благодаря им получил вчера первый оффер!
@mishanep
@mishanep 2 жыл бұрын
Поздравляю, Евгений! Очень рад за вас!
@Sashaa
@Sashaa Жыл бұрын
сколько учился до первого офера? как сейчас дела?
@yevgenymakkaveev7708
@yevgenymakkaveev7708 Жыл бұрын
@@Sashaa Привет, только увидел оповещение об ответе. Учился я с большими перерывами, но активной учебы было пол года, прямо сутками сидел уже сам. До этого были курсы, в числе их и занятие у автора канала, которые задали вектор, но полностью погрузится тогда не удалось и если честно далеко не все понял в полной мере, что читали. Наверное тут главно не бросать и не ждать что с первого раза все усвоится. Хорошо если и будет так, но мне кажется во многом влитая в первые ошибки и сломанные программы ты начинаешь куда лучше понимать как сделать что бы работало, а уже потом учишься делать что бы и работало и было красиво и правильно. Сейчас дела относительно неплохо, работаю в стартапе с довольно интересными проектами.
@Sashaa
@Sashaa Жыл бұрын
@@yevgenymakkaveev7708 спасибо, удачи вам!
@user-ob6si4ii2h
@user-ob6si4ii2h Жыл бұрын
Добрый вечер! Подскажите, как искали работу. Есть ли у вас портфолио? Что было на собеседовании? Когда захожу на hh и смотрю требования, то думаю, что никогда не найду работу
@_oxios_
@_oxios_ 2 жыл бұрын
Спасибо за обзор и примеры) Было бы интересно посмотреть уроки по углубленной работе с хукФорм.
@user-bp7jb5of5d
@user-bp7jb5of5d 2 жыл бұрын
Михаил, спасибо за урок. Очень полезная библиотека. Обязательно буду использовать ее в своих проектах.
@victormog
@victormog 2 жыл бұрын
Спасибо! Если будет возможность, расскажи, пожалуйста, про использование отдельных библиотек валидации и интернационализации в React.
@unknown.6914
@unknown.6914 3 ай бұрын
Отличное обьяснение, спасибо!
@twentysixhugs
@twentysixhugs Жыл бұрын
Очень хорошо рассказываешь, что позволяет быстро во всем разобраться. Спасибо.
@RonaMelone
@RonaMelone 2 жыл бұрын
Михаил, это чудесно! Мне больше понравилось, чем видео на оф. сайте. Плюс ваша ремарка о поддержке UI-библиотек оказалась весьма кстати. Не нашла на их сайте, а вы нашли. Спасибо😘
@mariabogdanova9759
@mariabogdanova9759 Жыл бұрын
Большое спасибо! Все очень понятно, можно быстро разобраться) И отдельное спасибо за приятную речь и отсутствие воды)
@user-hq3em8iy9c
@user-hq3em8iy9c Жыл бұрын
Коротко и очень понятно. Здорово объясняете!! Спасибо вам, Михаил!!
@Denis-pu4bt
@Denis-pu4bt 2 жыл бұрын
Библиотека обновилась и ваш урок очень кстати, спасибо за вашу работу, лайк и подписка)
@elenaizmaylova9331
@elenaizmaylova9331 Жыл бұрын
Просто отличнейшее объяснение!!! Спасибо огромное! Всего Вам самого наилучшего!
@darkcasper1488
@darkcasper1488 Жыл бұрын
Михаил, спасибо Вам огромное за ваши видео уроки!!!!
@alexanderwebdev5558
@alexanderwebdev5558 2 жыл бұрын
Михаил спасибо вам за ваши видео!!! Много смотрел и учился по разным видео но ваши видео и объяснения очень помогли !!!
@Gombo_Batuev
@Gombo_Batuev 3 ай бұрын
Как же грамотно все объяснено. Спасибо вам за такую работу!
@arispaskalov3471
@arispaskalov3471 2 жыл бұрын
Спасибо большое! Один из лучших русскоязычных гайдов
@mrrappbit
@mrrappbit 6 ай бұрын
Михаил, у вас очень классные видео, все подробно и понятно, спасибо ❤
@sergeykudryashov9097
@sergeykudryashov9097 2 жыл бұрын
Спасибо за ролик. Все очень понятно
@Zubairavvv
@Zubairavvv Жыл бұрын
Михаил спасибо за ваши видео очень понятные и полезные, удачи вам!
@viktornaymayer8882
@viktornaymayer8882 2 жыл бұрын
Спасибо, отличная подача материала :)
@Natalia-ph
@Natalia-ph Жыл бұрын
Спасибо за столь полезную информацию
@purplebaby15
@purplebaby15 7 ай бұрын
Отличная подача, обращение к документации.Думаю будет понятно даже чайникам которые ещё даже не работали с React'ом.Спасибо
@user-wq8gu3zj2q
@user-wq8gu3zj2q 11 ай бұрын
Супер! Спасибо Вам большое!
@olfi1728
@olfi1728 2 жыл бұрын
Спасибо, всё чётко и понятно.
@user-yj4wt8nr6v
@user-yj4wt8nr6v Жыл бұрын
Спасибо за видео, то что нужно!
@myroadtodream
@myroadtodream 2 жыл бұрын
Спасибо, пригодилось на проекте!))
@user-jn5cb4zb7f
@user-jn5cb4zb7f Жыл бұрын
огромное спасибо - это прекрасное и очень толковое объяснение))
@user-fq4pc7fm2z
@user-fq4pc7fm2z Жыл бұрын
Спасибо за урок!
@vichislav_tv
@vichislav_tv Жыл бұрын
отличная информация отлично подана, спасибо большое!
@Bliqu1
@Bliqu1 2 жыл бұрын
Спасибо большое за ролик, очень много времени сэкономили
@annabielskaya1626
@annabielskaya1626 2 ай бұрын
Спасибо за видео - подача просто шикарная, очень помогло 🔥
@user-dz1mb8cj4d
@user-dz1mb8cj4d Жыл бұрын
Спасибо! Устала искать ошибку, почему все не работало, а тут одно видео и счастье
@user-qh2em5cb2i
@user-qh2em5cb2i 4 ай бұрын
Профессионал своего дела😎, спасибо вам
@zahodiChe
@zahodiChe 5 ай бұрын
Спасибо! То, что я искал
@user-ty4bl8ve7h
@user-ty4bl8ve7h Жыл бұрын
Очень помогли. Спасибо.
@nh42so42
@nh42so42 7 ай бұрын
очень хороший гайд, спасибо!
@maxgib2489
@maxgib2489 Жыл бұрын
Мне это напомнило чём-то работу с Form от старого AntD, ролик бомба!
@user-ht4es2nw7k
@user-ht4es2nw7k Жыл бұрын
Спасибо! Кратко и понятно. На первый взгляд проще чем Formik
@user-es7mq2kk3g
@user-es7mq2kk3g Жыл бұрын
Спасибо. Очень крутое видео)
@user-mu8by2yg3g
@user-mu8by2yg3g 2 жыл бұрын
ОООО СПЕР ! я как раз делаю тестовое и там требуют использовать RHF. Так то основное уже запилил, но будет здорово проверить себя и допилить. Ставлю лайк и начинаю смотреть.
@user-el5ls2cq1y
@user-el5ls2cq1y Жыл бұрын
Ой ой ой! Красавчик! Лайк за крутое объяснение!
@sergeyvarfolomeev2627
@sergeyvarfolomeev2627 2 жыл бұрын
Спасибо, Мужик! Очень круто! Мой инглиш оставляет желать лучшего и без твоего урока, так и не смог нормально прочитать документацию, а переводчик просто ЖЖЁТ и путает еще сильнее
@user-if2fo6yr6w
@user-if2fo6yr6w Жыл бұрын
Был очень полезен!
@SerhiiNesterov
@SerhiiNesterov 2 жыл бұрын
Спасибо!
@dmitriymovchan6563
@dmitriymovchan6563 2 жыл бұрын
О, я как раз сейчас впервые на проекте начал испольтзовать react-hook-form.
@norwinlol
@norwinlol 2 жыл бұрын
Лайк не глядя)
@newfeel.305
@newfeel.305 Жыл бұрын
Супер!
@shoxerpetrosyan8678
@shoxerpetrosyan8678 Жыл бұрын
spasibo za video,,!!!!!
@olehy5000
@olehy5000 2 жыл бұрын
Спасибо! Возьму на вооружение. Намного проще чем формик и юп).
@jkisazhm5612
@jkisazhm5612 9 ай бұрын
Супер мега харош
@user-iw7wr5yk1d
@user-iw7wr5yk1d 4 ай бұрын
спасибо очань чётка коротко и ясно
@mv_19v77
@mv_19v77 2 жыл бұрын
Nice tutorial.... Very helpful
@nikomunikabelen8540
@nikomunikabelen8540 10 ай бұрын
спасибо!
@mak_whisk
@mak_whisk Жыл бұрын
Спасибо
@vladislav_pikiner
@vladislav_pikiner 2 жыл бұрын
самый недооценённый канал на ютубе по тематике)
@Aegon_Targarien
@Aegon_Targarien 2 жыл бұрын
Расскажите пожалуйста как пользоваться eslint+prettier в проектах
@user-vv5mu7yc2b
@user-vv5mu7yc2b 2 жыл бұрын
Ещё из плюсов - она хорошо работает в связке с yup
@ninshu1138
@ninshu1138 2 жыл бұрын
Что думаешь про antd forms? Если в проекте уже есть antd, стоит ли тянуть еще либу для управления формами?
@thehuman9604
@thehuman9604 9 ай бұрын
Сделай плизвидео про RHF + Yup. Для примера думаю идеально подойдет форма регистрации с несколькими шагами. Спасибо
@dmytrovoronov9320
@dmytrovoronov9320 2 жыл бұрын
Теперь не хватает Formik и Yup ))
@MrDobro1214
@MrDobro1214 Жыл бұрын
Добрый день. Спасибо большое за видео. А с Валидацией пароля будет такая же логика?
@MrDobro1214
@MrDobro1214 Жыл бұрын
Или к примеру я хочу сделать проверку пользователя, "Введены некорректные данные" или же "Данный пользователь уже зарегистрирован" или "Некорректный логин или пароль"
@velikorossnationalist4259
@velikorossnationalist4259 Жыл бұрын
А стили к форме какие применили?
@user-bh2qf9qp4s
@user-bh2qf9qp4s Жыл бұрын
Спасибо за объяснения , подскажите пожалуйста есть инпут пароля и при клике на иконку , надо поменять type инпута , как правильно будет обратиться к нему ? Пока сложно перейти с чистого js в react
@mishanep
@mishanep Жыл бұрын
Попробуйте через ref. Посмотрите в сторону хука useRef
@cliveriddell5700
@cliveriddell5700 2 жыл бұрын
Добрый день, Михаил. Будет ли обучающее видео по redux-saga?
@mishanep
@mishanep 2 жыл бұрын
Пока не планирую. Видел в сети в этом году целый цикл на эту тему, и повторяться не хочу. Точно где не скажу, мне в твиттер ленте вылетали выпуски, их там более десятка по саге.
@bigboy3085
@bigboy3085 2 жыл бұрын
Миша, пожалуйста, сделай видео по React-Query. Твои примеры и объяснения с наслаждением смотришь, а на русском сегменте Ютуба про эту библиотеку ничего нет, либо говно снимают)
@mishanep
@mishanep 2 жыл бұрын
Никогда не работал c React Query, только с похожим на него RTK Query, что вместе с Redux Toolkit идет (на канале есть видео про него).
@magaboy7232
@magaboy7232 2 жыл бұрын
а как передавать значения во вложенные элементы ?
@arthurq7843
@arthurq7843 6 ай бұрын
Что популярнее React Hook Form или Formik?
@maxet2374
@maxet2374 2 жыл бұрын
Оч логично написать то же но с сохранением состояния в Redux
@oleksii_smirnov
@oleksii_smirnov Жыл бұрын
Подскажите пож как можно разделить форму, чтоб разбить по компонентам и в отдельном файлике прописать валидацию к инпутам? Сам уже несколько дней ковыряю - одна сплошная ошибка (ругается на реф, не видит валидацию). Может было бы проще, но я использовал материал юай в довесок :))). Документация хук форм тяжело дается, английский слабоват. П.С. Спасибище за крутяцкий контент. Все мега доступно, понятно и конструктивно)
@SAID-bb6zv
@SAID-bb6zv 7 ай бұрын
да но почему когда прописываю (const {} = useForm()) вечно ругается на useRef если даже я его не прописывал
@fellow3251
@fellow3251 2 жыл бұрын
Hola! Подскажите пожалуйста, куда необходимо прописать функцию, которая отправляет данные(email, password) для авторизации?
@mishanep
@mishanep 2 жыл бұрын
Hola! Если правильно понимаю задачу, то в хэндлер сабмита формы.
@user-hd3ov5lj1u
@user-hd3ov5lj1u 2 жыл бұрын
Михаил. будут ли видео о formik?
@mishanep
@mishanep 2 жыл бұрын
Пока не планирую.
@user-hd3ov5lj1u
@user-hd3ov5lj1u 2 жыл бұрын
@@mishanep жаль(
@Asgyr
@Asgyr 2 жыл бұрын
а есть урок или будет урок с методом входа в приложение через jwt token ?
@mishanep
@mishanep 2 жыл бұрын
Есть базовый пример авторизации через Firebase kzfaq.info/get/bejne/n9yklbVzqtCwh2w.html Там упрощенный вариант jwt.
@alexmelentev9161
@alexmelentev9161 2 жыл бұрын
а подскажите кто-нибудь как сделать чтобы при первом рендере поля, которые необходимо заполнить выделялись как-то, ну точнее чтобы ошибка "поле необходимо заполнить" появлялась сразу при открытии страницы, а не после клика на инпут, потому что формы бывают большими и кнопка задисэйблена, но какое поле точно нужно ввести не понятно, HELP anybody!
@SmirnovYT
@SmirnovYT Жыл бұрын
Спасибо! Ребят кто подскажет, что значит знак вопроса(errors?.firstName?. и тд) или это тернарное выражение? Просто не особо понимаю логику написания его тут.
@promoabys
@promoabys Жыл бұрын
Это из TypeScript ?. оператор для доступа к необязательным свойствам TypeScript может немедленно остановить выполнение некоторых выражений, если мы столкнемся с нулевым или неопределенным значением. В ином случае будет ошибка вылетать об отсутствии данных.
@SmirnovYT
@SmirnovYT Жыл бұрын
@@promoabys Спасибо)
@Chambo015
@Chambo015 Жыл бұрын
Вопрос, а как бороться с пробелами ? Если вместо 5 символов передали 5 пробелов
@mishanep
@mishanep Жыл бұрын
В js для строк есть метод trim, который очищает лишние пробелы.
@Chambo015
@Chambo015 Жыл бұрын
@@mishanep Уже нашел решение с помощью setValue и там делаю trim(). Чтобы валидация не учитывала пробелы как символ
@Diyaz86
@Diyaz86 2 жыл бұрын
А почему обязательно нужно поставить знак вопроса чтобы работало? errors.login?.type
@mishanep
@mishanep 2 жыл бұрын
Затем что если у вас не будет ошибки в поле login, то error.login будет равен undefined, а при попытке запросить в таком случае errors.login?.type приведет к ошибке. Потому что у undefined не может быть никаких ключей через точку. Такая запись называется optional chainig и является современной альтернативой проверки errors.login && errors.login.type
@Diyaz86
@Diyaz86 2 жыл бұрын
@@mishanep Спасибо за разъяснение!
@user-xq8qk7ss8i
@user-xq8qk7ss8i 2 жыл бұрын
А библиотека для валидации форм оказалась не такой уж непонятной. До этого всегда писал валидацию самостоятельно.)
@mishanep
@mishanep 2 жыл бұрын
Да, очень удобно :)
@svetultus_
@svetultus_ 2 жыл бұрын
Хорошее видео, но очень мелко - пытка для глаз
@diggerdog001
@diggerdog001 7 ай бұрын
А на чистом JS кто нибудь щас пишет валидацию формы в продакшене?
@mishanep
@mishanep 7 ай бұрын
Конечно. Немало сайтов, вообще не использующих фреймворки - одна ванилла. Оно сложнее, но работает обычно быстрее.
@anonymousNouname
@anonymousNouname 2 жыл бұрын
Для type="url" нет валидации. Чтоб она работала надо добавить инпуту type="url" и minLength в register, указать номер не меньше 5, вот так: тогда будет доступен typeMismatch
@anonymousNouname
@anonymousNouname 2 жыл бұрын
и еще... mode: 'onChange' не будет работать, если у инпута стоит обработчик 'onChange'
@mishanep
@mishanep 2 жыл бұрын
Там onChange тоже по-хитрому можно задавать. Можно добавить свою обработку, сохранив ту, что использует библиотека. В документации были соответствующие примеры. По поводу url, лучше наверное регулярку правильную подобрать.
@armorunit6970
@armorunit6970 Жыл бұрын
Спасибо!
React Hook Form - Complete Tutorial (with Zod)
28:22
Cosden Solutions
Рет қаралды 87 М.
SWR для CRUD операций в React-приложении
25:50
Михаил Непомнящий
Рет қаралды 13 М.
Пробую самое сладкое вещество во Вселенной
00:41
I CAN’T BELIEVE I LOST 😱
00:46
Topper Guild
Рет қаралды 68 МЛН
Мы никогда не были так напуганы!
00:15
Аришнев
Рет қаралды 4,4 МЛН
React Hook Form | Валидация Checkbox Component за 7 минут
7:06
Типичный Веб Разработчик
Рет қаралды 458
React Hook Form (+ Zod) - Complete Tutorial
31:21
ByteGrad
Рет қаралды 84 М.
Тестирование React приложения
1:03:02
Михаил Непомнящий
Рет қаралды 61 М.
Парсим админку Мегамаркета с помощью скрытых API
30:56
Алексей Куличевский
Рет қаралды 46 М.
Валидация в React: интеграция yup с React Hook Form
8:22
Егор Локи [Frontend]
Рет қаралды 780
Пробую самое сладкое вещество во Вселенной
00:41