Form Validation in React Material UI

Подписаться 146 тыс.

Просмотров 88 тыс.

50% 1

Form Validation in React Material UI.
✨ Premium Course on React Hook Form with Material UI
➤ bit.ly/3zGAj1Y
In this video, we discuss how to implement validation in React Material UI Form and how to insert a new record through the form submit event.
📂 GitHub Repository
► bit.ly/3k3iU7d
💖 Buy me a Coffee
➤ bit.ly/3L36ut4 (PayPal)
➤ bit.ly/3VF0iPT (Razorpay)
🌀 Related Videos
bit.ly/3gkyQ2D : Introduction to Material UI
bit.ly/3gnfXMr : Customize MUI Components and Theme
bit.ly/2ZoeShN : Form Design - ( Prev. Video )
bit.ly/3hM0gz8 : Form Validation - ( This Video )
bit.ly/3fPcxBe : Table with Paging, Sorting, and Filtering - ( Next Video )
bit.ly/3g4IlCq : Modal Popup Dialog
bit.ly/3j5za6t : Confirm Dialog & Notification
🔗 Find me in
Udemy : bit.ly/3RtyQSB
Facebook : / codaffection
GitHub : github.com/codaffection
Discord : / discord
Twitter : / codaffection
#MaterialUI #Reactjs #CodAffection

Опубликовано:

27 июл 2020

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 64

@CodAffection 4 года назад

goo.gl/RFY5C2 : Subscribe to CodAffection goo.gl/bPcyXW : Buy me a Coffee bit.ly/3gkyQ2D : Introduction to Material UI bit.ly/3gnfXMr : Customize MUI Components and Theme bit.ly/2ZoeShN : Form Design - ( Prev. Video ) bit.ly/3hM0gz8 : Form Validation - ( This Video ) bit.ly/3fPcxBe : Table with Paging, Sorting, and Filtering - ( Next Video ) bit.ly/3g4IlCq : Modal Popup Dialog bit.ly/3j5za6t : Confirm Dialog & Notification

@Pedro21Torres 3 года назад

All this videos from that serie helped me a lot, thank you so much! I think that on the Form Validation you should use Yup.

@Lipak29 3 года назад

@CodAffection. I have a Form cnontainer where I change the different Form based on the dropdown selection which is on the parent container. Now I have different form fields but the form element is only one. Using your approach how can i pass that the relevant form which is loaded will be validated? For ex. i have MainContainer with (Name, Type (S3, FTP), and Submit Button). Based on the type selection say FTP, the UI will render the FTPDetails.js (Component) which has the fields just like your employee for and i thought to put the validation code in FTPDetails.js instead of container. But not sure how to invoke the validation code. Any suggestion?

@nocturno7887 3 года назад

Excellent content. Was missing input file management in my opinion, but still valuable, thanks!

@khandoor7228 4 года назад

good work CA looking forward to the next video!

@sonammankame107 3 года назад

@CodeAffection. Thank you this example. My Form is has too many input fields is there a way to split them in 2 files as components and then call them inside the Form tag. I tried but it gives me errors.

@jacoblim2945 3 года назад

Hey, thanks a lot for this video, really helped me with setting up form validation. One thing I don't fully understand is towards the end when you add in the fieldValues and assign it the "values" state. why is this necessary and how exactly does the equality check (fieldValues == values) at the end determine if the validate() function is being called in the handleSubmit or handleInputChange? I omitted it and the form validation works so it seems unnecessary

@tranquangang9420 2 года назад

Very helpful, thank you so much!

@papagachango 3 года назад

Awesome! how do you set layout and its controls to be responsive on mobile screen

@abhisheksuryavanshi7396 3 года назад

what if i want to add the data in form of array on json server?

@JoseMartinez-lv4po 3 года назад

Great job, thanks CA.

@abhijeetshikharvlog1444 Год назад

I write multiple condition of email id validation but else if ia not working why ?

@pankaj.yadav1 3 года назад

sir my validate function not working what can do please help me ... const handleSubmit= e=> { e.preventDefault(); if(validate()){ employeeService.insertEmployee(values); } } in this code inside in if condition nothing execute , sir what am I supposed to do ... please help me

@2005Azm 4 года назад

Great as always !

@CodAffection 4 года назад

Thanks again!

@soumyabhardwaj2999 3 года назад

How can i ADD validation to check box and gender radio buttons ?

@techgeeks1643 3 года назад

thank you this help me lot

@user-jg3ds1mv9p 3 года назад

Thank you very much. What is the license of the source code?

@baniyaboy8903 3 года назад

what if we use node js for backend instead of localstorage . please connect this form with node js. make a video on this topic

@brendonanderson8673 4 года назад

Dude your videos save my life!

@amzykhan8581 2 года назад

When I reset it clears the fields but no the errors

@nitinjha3718 3 года назад

Hi you should also add Memoization in usetable part

@ivanderlich3776 3 года назад

Do you have the repository so I can give you a star?

@interestingevents7029 3 года назад

could you please demostrate Jest in this project

@interestingevents7029 3 года назад

when i click new employee i should have a empty form... but when i click an employee its should show its details in those Textfields... and i can update those details ans save agian... how can i achive that too? please add those piece of code in the project too...

@CodAffection 3 года назад

It's explained it today's video. will be live within 2hr.

@tanaybanerjee991 3 года назад

nothing is showing in my localstorage

@chrismanuel8993 2 года назад

nice video

@mattmarkus4868 4 года назад

Hi, do you show how to get data from api using react and M UI in any of your videos?

@CodAffection 4 года назад

nope, I've not used any specific API to retrieve the data. because it might most of you if you are not familiar with the api/ environment. So i used local-storage.

@chrisperry5658 3 года назад

@@CodAffection I would recommend doing a video on how to load options asynchronously. Having an example of how to make a form that depends on promises would be really helpful.

@101_shambhavisharma8 3 года назад

For implementing this validation. What pakage we need to install through npm or what we need to include in our code ?

@96ptg 3 года назад

No extra package is being used for validation here. Just follow the tutorial. It works.

@marynakosiv3750 3 года назад

BOOM * !

@nbsangee 3 года назад

please make this with same example in typescript !! thanks!!!

@dileepkamboji243 3 года назад

i am getting id as undefined

@saivivekravi4979 4 года назад

Super can you make more on material ui tell me what font family you are used in vscode please can you send me your setting.json of vscode

@CodAffection 4 года назад

Dank Mono, it's not free actually.

@tusharpatel7794 4 года назад

Can you make a series on frontend as a react and backend as a django api

@kefamutuma7402 3 года назад

I second this. With Authentication and Private routes

@743Dora Год назад

How can I update this to latest MUI and use it

@CodAffection Год назад

follow the same steps after installing the current Material UI version 5 and let me know if there is any error.

@743Dora Год назад

@@CodAffection but seems the packages are different in 5

@ashraf6850 3 года назад

Hello sir without scaffolding crud operation banao asp.net MVC EntityFramework please sir

@ABsazerNer 3 года назад

I made project in angular, the validation in angular is so easy and simple than that

@miguelangelchamorrofuentes9248 4 года назад

the github code?? please, thanks

@CodAffection 4 года назад

It's added to the video description.

@jainishsakhidas4571 3 года назад

bro i am getting an error in temp.fullName

@jainishsakhidas4571 3 года назад

Property 'fullName' does not exist on type '{}'. this is the error i am getting

@augustyng 3 года назад

@@jainishsakhidas4571 in typescript you should use let temp:any = {} maybe someone will be helped by this

@cejaramillof 4 года назад

can share the github? thanks

@CodAffection 4 года назад

It's added to the video description.

@user-ki4hm8ru7d 2 года назад

28:11

@savaramkiran 2 года назад

By Default Department Error message is not in Red Color

@CodAffection 2 года назад

hope you are following the series one by one. did you compare the demo project with yours.

@savaramkiran 2 года назад

@@CodAffection can i get demo project link

@mrwho2513 2 года назад

I'd like yt had a filter for indian tutorials....

@abhishekCJsharma 3 года назад

26:15

@lucasmegaloja 4 года назад

I sent you 1.22 dollars, for supporting you

@CodAffection 4 года назад

Thanks for the support. Really appreciate it.

@sanjeebgochhayat6911 Год назад

Can you polish the content and made this video again

@CodAffection Год назад

I thought about it, let's see

@sanjeebgochhayat6911 Год назад

@@CodAffection Actually i implemented this specification in my project and it's working too.. But i got some issues...Can i get ur email adress please