Form Validation in React Material UI
HTML-код
- Опубликовано: 21 сен 2024
- 🍒 Related Videos
Next Video: • React Material UI Tabl...
Previous Videos: • How to Design a Perfec...
MERN Stack CRUD: • Complete React + Node ...
React Quiz App with Web API: • Build a React.js Quiz ...
Everyone's favourite way of creating React forms: • React Hook Form - 1. I...
Advanced JavaScript Concepts: • Advanced JavaScript Co...
🚀 Udemy Course on React Hook Form with Material UI
➤ bit.ly/3SQ3ExE (Discount auto-applied)
📂 GitHub Repository
► bit.ly/3k3iU7d
💖 Channel Support
➤ Paypal: bit.ly/3L36ut4
➤ UPI App: geni.us/ScanQR...
➤ Amazon: geni.us/Amazon...
💌 For Business Inquiries
➤ codaffection@gmail.com
🚶♂️ Follow us
Facebook : / codaffection
Discord : / discord
Twitter : / codaffection
---
Form Validation in React Material UI.
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.
#MaterialUI #Reactjs #CodAffection
goo.gl/bPcyXW : Buy me a Coffee
bit.ly/3AG7HX4 : Next Part
bit.ly/4e2VPNn : Previous Videos
bit.ly/3MkvBrh : React Quiz App with Web API
bit.ly/3Me2bxo : Everyone's favourite way of creating React forms
bit.ly/3Co6FMA : Advanced JavaScript Concepts
bit.ly/2HwIEqF : MERN Stack CRUD
Excellent content. Was missing input file management in my opinion, but still valuable, thanks!
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.
Very helpful, thank you so much!
Dude your videos save my life!
BOOM * !
good work CA looking forward to the next video!
Great job, thanks CA.
I write multiple condition of email id validation but else if ia not working why ?
please make this with same example in typescript !! thanks!!!
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
thank you this help me lot
Awesome! how do you set layout and its controls to be responsive on mobile screen
@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.
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
Do you have the repository so I can give you a star?
Great as always !
Thanks again!
what if we use node js for backend instead of localstorage . please connect this form with node js. make a video on this topic
How can i ADD validation to check box and gender radio buttons ?
Can you make a series on frontend as a react and backend as a django api
I second this. With Authentication and Private routes
Hi, do you show how to get data from api using react and M UI in any of your videos?
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.
@@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.
Hi you should also add Memoization in usetable part
@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?
Thank you very much.
What is the license of the source code?
what if i want to add the data in form of array on json server?
nice video
I made project in angular, the validation in angular is so easy and simple than that
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...
It's explained it today's video. will be live within 2hr.
When I reset it clears the fields but no the errors
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
Dank Mono, it's not free actually.
could you please demostrate Jest in this project
Hello sir without scaffolding crud operation banao asp.net MVC EntityFramework please sir
For implementing this validation. What pakage we need to install through npm or what we need to include in our code ?
No extra package is being used for validation here. Just follow the tutorial. It works.
By Default Department Error message is not in Red Color
hope you are following the series one by one.
did you compare the demo project with yours.
@@CodAffection can i get demo project link
How can I update this to latest MUI and use it
follow the same steps after installing the current Material UI version 5 and let me know if there is any error.
@@CodAffection but seems the packages are different in 5
bro i am getting an error in temp.fullName
Property 'fullName' does not exist on type '{}'.
this is the error i am getting
@@jainishsakhidas4571 in typescript you should use
let temp:any = {}
maybe someone will be helped by this
I sent you 1.22 dollars, for supporting you
Thanks for the support. Really appreciate it.
nothing is showing in my localstorage
I'd like yt had a filter for indian tutorials....
28:11
i am getting id as undefined
Can you polish the content and made this video again
I thought about it, let's see
@@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
heiaaa
the github code?? please, thanks
It's added to the video description.
can share the github? thanks
It's added to the video description.
26:15