Material UI React & React Hooks MultiStep Form With Validation Part#1

[Music] hey what's going on guys welcome to the new project and today we're gonna build the multi-step form we're going to use the technologies react and material ui so you can see here's the simple form with the three steps uh first step it's a sign up uh here's the form with text fields for the first name a last name for the phone format and you can see if we open here's a i think here's all the countries and by default you can see here's the canada but we can change it and this is a this is a library i will show you how to use this library all right so next it's email password and confirm password so let's go through all the fields of course this form gonna be the uh with validation and this only is a front-end not of any back-end guys so here's the first name if i type uh one letter you can see here is the error message enter valid first name if i type second letter the message error message disappeared so i add not less than two letters okay because some people have name with the two letters for example uh joe all right so for the last name uh it's same the story not less than two and if we're gonna leave empty here's another uh error message this is required field all right two different error messages and for the email we're gonna use regex and here's the email format for example it's supposed to be the ad and let me type the russian provider of emails mail. okay not less than two letters after dot uh because in russia we have format ru or maybe your website gonna have the email and for example tv or ca or i don't know su so you got the idea guys so after that i add not less than two all right let's move forward here's the password so if i type one letter here's the error message right away minimum six characters and at least one special character so also you can see we can click and we can see what we're gonna type for example let's add six characters the message still shown to us because we need add any special characters okay all right so and for confirm password let me see what we're gonna type let's type same and we need to add special characters and after we type correct confirm password when the passwords match and no empty text fields uh we can see the sign up bottom not anymore disabled and check box okay if we're gonna leave empty we can see the disabled button all right all right so this is a first step sign up uh let's move forward to the choose plan and here we have choose the plan you can imagine i have online movie theater like netflix and when people sign up they can choose their plan for example let's take a premium and let's click right here and you can see here's a plan what i chose let's go back we can change basic and you can see it is a basic plan so we're gonna use the local storage to store our data okay so and for the last step for checkout i built the pop-up and simple form set up your debit or credit card so here's the same validation okay and for credit card expiration date and csv code i just add if you type letters it's gonna be the must be number error message and let's type the numbers and no more error same thing right here numbers no error nothing special guys simple simple all right so that's it that's what we're gonna build so if you're ready if you like this tutorial don't forget to share don't forget to like and of course subscribe to not to miss any new projects alright so let's start it and we're gonna build everything from scratch guys this is i think this is best way to learn when you follow along from the scratch all right so i'm gonna create a new folder i'm gonna name it uh react material ui multi-step form okay and so now i'm gonna open visual studio i'm going to open this folder and now and here we're going to install react boilerplate so i'm going to open the cancel and you can see we inside this folder so to create a react boilerplate just create react app space and period and press enter so that's been that's gonna build inside this folder you can see the process is starting all right now let's uh clean a little bit i'm gonna delete unnecessary files and images uh okay and in source folder i'm not gonna use index.css and and this logo i'm gonna remove them and in index i gonna remove this import path because i deleted this file and i think that's it for the index now let's see an app we deleted the logo so let's remove the import path and right here i'm gonna delete everything i don't need this class name and i'm gonna type some message hello that's it so to see if our app working without any errors so to start the app npm start all right we can see the application work without any issues so let's start building guys and i'm gonna create inside this source folder another one and i'm gonna name it components here's is gonna be all the components okay so first component i'm gonna name it uh multi-step form that's gonna be the main component so inside this component we're gonna render all our three steps all right so i'm gonna use this snippet a a f c e afce and press tab so it's built for me the functional component uh i use the plugin let me show you guys and this is and this plugin all right so if you don't have install i highly recommend you because it's make a process faster to build the application also you can install bracket pair colorized and let's make a different colors of my code so it's very easy easy to navigate inside your uh code all right so if you don't have them recommend you guys install it all right and we move forward so i use double quotes so we're going to change from single to doubles to make my code more even and also and now we need to install material ui core and material ui icons because we're gonna use the icons uh also we're gonna use the react router so let's install this patches i'm gonna split and my console and npm install i shortcut for install and first gonna be the material ui core and material ui icons and of course react [Music] yeah react router dom alright so it's take some time all right so we installed all the packages we need for now and let me add some text right here [Music] main component just to see if our react router gonna work and let's go to the apps gs and right here we need to import the react router but before we import we need to go to index js and import right here the browser router and we're gonna name it rename it router you can name give name in you like but usually our programmers name it router so and it's come from react router dom what do browser router it's a help to route in the browser all right so let's wrap everything with the with the router we wrap our highest component which is app app component this one all the components gonna be inside of this component and the router will allow us to route between the components all right but we're gonna route only from app to multi-step all right so i don't forget add the comma here let me save and we're done with the index for now and right here let's import route from react router dom and this component gonna help us to route and now we can build the path where we wanna route to so let's add this component route specify the path and we wanna localhost 3000 okay so it's going to be the main main path and component i want to use the multi-step form don't forget to close all right now we need to import import this component and it's inside the components folder all right we don't need to specify that gs because it's javascript it's already now react already know this is a gs format and now we should be good to go so we saved let's go to browser and here you can see the main components this text come from this component multi-step form all right so now we can import and start building our header okay so let's import components from a material ui core so and we need to stepper i will explain you guys what these components and why we use them okay step then step label and we need typography and button and it's come from material ui core okay i will install this package and where is this for those who don't know where it's come from here's the folder node modules and if we open it we can see material ui and here's the core pad and here's all all the components also icons and styles that's three of this folder we're gonna use okay so let's import the styles uh import uh make styles which gonna allow us to style our components all right and let's come from material ui core and folder styles let me close it up before we're gonna render and return summit i wanna create a couple functions and first function i'm gonna name it get steps and i'm gonna return inside this function the array with three strings first string are gonna be sign up second string gonna be the choose plan and third one gonna be uh check out all right here's gonna be first step that's gonna be the second and third one this is the titles all right and second function i'm gonna name it get steps content i'm gonna pass the arguments step index and we're gonna use the switch we're gonna loop through the steps okay and we're gonna use the switch and i'm gonna pass the same parameter steps index step index and the case 0 y 0 cause we're gonna loop through the titles okay so zero one two and i wanna return and just string step one sign up for the second step i'm gonna use one and return step two choose plan and for the case two for third step return and step three that's gonna be the checkout okay so now let's return the components and of course don't forget to add default we're gonna return if nothing we're gonna return unknown step okay let's get rid of this text we don't need and inside i wanna add the stepper component and inside the stepper i want to map through all our steps okay these titles so let's do this before we do let's uh put this function inside inside the variable i'm going to name it steps okay so now we can use the steps and it's gonna contain uh this function all right let's map so steps dot map and argument i'm gonna name it label i'm gonna use the arrow function and i wanna return the component step which this one and inside the step uh step label and pass right here the label and of course don't forget add the key because we are going to argue and i'm going to name it label all right so now i think we can see what we've done but before let's add the class right here and it's time to use make styles i'm going to create the variable gonna name it use styles and it's gonna contain make styles method it's going to be the object and now i can name the classes okay it's going to be the objects so i want to name first class root that's mean going to be the main class and i wanna pass the width hundred percent not hundred let's add fifty comma and okay here's typo margin i want to add on the top six ram and right and left out let me add the border and one pixel solid that's gonna be triple nine let's save and let's see what we build save it all right we can see our stepper so uh let's place the titles under the numbers okay to do that in the stepper we need to type alternative label all right save let's see and here it is all right so let's uh so we we don't see the styles yet because we need to create uh another variable i'm gonna name it uh classes and it's gonna contain use styles okay replace this variable i mean this method inside this variable classes and to use the class uh we need to type class name and use the classes dot root the class which we just create okay this one and let's see and you can see all the styles applied okay so let's create the functionality and we can switch between the steps okay and let's first change the color let me inspect and the way we can change is this we need to uh grab the name this name of classes i'm copying i gonna add those classes right here in the quotes uh ampersand that's important then i'm gonna paste the name of the classes and don't forget to add period right here and right here no spaces in here because it's not going to work all right so and inside i want to change the color to be red let me save let's see and i will change the color okay when it's active okay and also when when it completed we need to change the color to what we're gonna do later so i wanna i want you to see what's gonna happen okay so now let's create the functionality we can switch between the steps all right as we use the functional component we're gonna use the react hooks okay so let me comment right here react hooks and i'm gonna create first hook in array i'm gonna name it active step and set active step and we're gonna use use state and by default that's gonna be the zero and let's bring use state from react all right and let's create another method i'm gonna name it handle next okay i'm gonna use arrow function and handle next without arguments and here is i'm gonna set active step okay so set active step i'm gonna use the arrow function to pref uh active step and prep active step just plus one so how it's gonna work so every time when we're gonna use on click event uh this function gonna be fired up okay and it's gonna change uh the step plus one the next so now we can uh right here after stepper uh let's bring the button just type next and let's add on click event and let's grab this function and add right here and in the stepper let's add right here after the class name it's at active step and i'm gonna pass the our hook our state all right by default it's zero active step and here after stepper let's check if active step gonna be equal to all the steps length that's mean when all steps done all right so we want to pass to our button string it's going to be the finish and if not all the steps finished we're going to add the next okay and of course we can get rid of this text because we're gonna check conditionally and we can place right here the button and conditional check gonna be the inside all right so we're checking if all the steps finished uh we wanna show inside the button the text finish okay if not it's gonna be the next and right here let's check again same thing let me copy this line to make a process faster okay we're checking again if all steps are done okay we're gonna pass the string the steps completed so if not completed uh we want to return our button let's see guys let's set button right here let's save let's see what we just built okay functionality working we not see the content and let's move this inside the stepper and let's add right here our function with all the text okay with all the cases so i'm gonna grab name of the function let me copy and i'm gonna pass right here and let's use react fragment i'm gonna wrap everything okay and we need to put inside uh the active step the state okay let's save let's see now okay we add the brake line right here okay and let's see now guys doesn't matter we can see the changing step to choose plan and check out okay i know the styles not perfect but it's okay we don't need the styles now okay we just need to see if uh our functionality working okay and let's guys remove this let's move down here let me wrap with a react fragment right here and let's see now what we got let's remove the class name from here let's add right here this div all right so let me see okay it's inside all right so step one sign up next it's active now choose plan choose plan and check out and check out and now i want to change to red when it's completed let's see what class name and the class name completed instead of active so let's change let me copy this and instead of active we're gonna add completed let's save let's check okay next okay next next all right so we done with the functionality now we're gonna build uh the each step okay the first step gonna be the form and now let's create step one okay in a components uh folder we're gonna create another file i'm gonna name it step one that's gonna be functional component and let me add some text all right now uh let me import in multi-step form okay i see here is a typo let me rename all right and an app just let me okay here's the now arrow multi step all right just tap save and right here we're gonna import the step one component right here and the comment here and step one from it's in the same folder so it's right here let me save and now let's see in the browser okay so we can see the text from step one component so now let's work let's build the form i can close for now the multi-step let me add double quotes right here and let's import the components from material ui which we're gonna use uh we need the typography we're going to use button we're going to use grid check box then we're going to use the text field outlined input form control and input label that's it for now and let's import make styles to style our components and right here uh let me delete the text i'm gonna add the typography component right here and i'm gonna use variant h5 and the text sign up with email let me save let's check our text all right so let's style it and we're going to style right here so the color i want to add triple nine and i want to text align to the center so now we can create the inputs inputs fields and after typography i'm gonna add the form let's add the text field component and let me add the couple attributes first gonna be there for the label i'm gonna name it first name and the second gonna be the variant that's mean what kind of input i want i want for the outlined okay let me save let's see all right so our first input ready and let me style i'm gonna add the styles right here so style and i want to with 100 and let me add the margin on the top one ram and right and left it's gonna be the zero let's save let's see and let's create a class for the main component uh i'm gonna create the variable i'm gonna name it use styles and i'm gonna place here make styles method it's going to be the object let's create the first class it's going to be main container and i want to display grid and justify content i want to the center and position relative and i'm gonna add z index and let's at five for now let's see let's create the variable uh i'm gonna name it classes i'm gonna put here use styles method and now we can use this class and right here class name classes that main container let me save let's see about hook call who can be called inside of the body of a function component okay that's why it's happened because i need to place right here inside of our function okay all right and let's create another div and we're gonna wrap our form with this div and i'm gonna add the class name form container and of course classes now let's uh style our form container after main container uh form container and background actually we don't need to background let's add the position relative uh width i want to add 28.1 to 25 frame and height gonna be out and let me add the paging i'm gonna use to ram and let's see okay let me close for now all right okay so let's create another inputs so now let's create for the last name i'm just gonna copy and paste right here i'm gonna rename last name and let me add okay let me see now uh okay so let me see okay let me get rid of them actually i'm gonna leave for this one and we're gonna delete the margin let me see okay it's good for now and now we need to add the phone formats and we're gonna use the library for this and let me split the console and we need to install with npm the library called react i n gl g e l and input let's install all right so we install it let's check and package json here's our library all right so now let's import right here i'm going to name it intl tl input from react into cell input so now we can add this component right here and i'm gonna add right here the attribute preferred countries that's gonna be the by default and by default in the array i wanna add for example the russian format you can add your of course so let's see what we have right here okay so the library installed and displayed but now we need to style it and we're gonna use styles of this library of course and here we need to import them right here so import react and hotel input the path gonna be this and main css okay that's come of course from here so let's find the react intel cell input library and i'm gonna show you where we import from okay here's the folder so you can see dist uh and main css so we import this file right here okay okay let me fold it now it's supposed to work yes okay and of course we're gonna style it and you can see by default it's russian format so let's see if i'm gonna add plus one let's change to united states so library working okay let's style this field let's first of all guys let's open our modules let's find the c main css file so we need to find okay here's the menses as well let's see what classes these classes uh let me just copy now let's go to the let me just fold it let's go to the source and let's go to the app css so let me delete everything and i'm gonna paste this classes and i'm gonna change it i'm not gonna change these rules but i'm gonna add new ones and height i want to let's add 3.5 ram and width at 28 ram let's add the border radius i want to use 5 pixels for the border radius and the border one pixel solid and let's add rgb 182 181 and 181 okay let's save we're not changing anything we just add new rules okay let's at the margin bottom right here so now we can close the app css and let's add right here margin bottom one ram all right so now let's continue let's add email field password and confirm password and the bottom and i think we're gonna finish for this video and okay so okay i'm gonna copy this text field right here and i'm gonna change the label to email and we you can see we repeat ourselves with the styles let's create the class for it for this input so input field i'm gonna name it like so and let's grab the our rules let's paste right here i'm gonna copy the class name and i'm gonna add i'm gonna delete this and class name classes at input field that looks more professional okay i'm gonna add right here and right here let me save let's see so it's uh working but and let's add the class right here class name let's say let's see and i'm gonna add the margin bottom for this phone input right here margin bottom one ram okay we need to alright need to important because we overwrite the main rules and okay okay now let's add the password and confirm password fields and we're going to build them differently and different way so right here let's add the form control component so and we're gonna add the out lined input component and attribute i want to add it's called and adornment and i need to bring right here guys a couple more components so it's gonna be input adornment and the icon button okay so let me add this component right here input a doorman and inside i can button and i'm gonna add right here edge that's gonna be the end okay and in this one it's gonna be the position end okay let me see [Music] okay let me add after the control input label password let me see okay and in form control i'm gonna add the variant and i'm gonna use outlined okay let's save let's see all right so and let me fix this i'm gonna add right here in atlanta input label width i want to use 50 let's see that's typo label let's see okay uh let's add 70. uh looks good that's good and let me add uh this style to the form control right here so let me copy and let me add right here save and let's see okay but we don't see the button because uh we need to create some functionality first of all let me bring the components the visa ability and visibility off that's for button and right here uh let me create the hooks and the first uh hook i'm gonna create for the password let me name it show password value and set show password value i use state and the value gonna be the show password false and let me copy for the confirm password same thing but this one gonna be show confirm password value set show confirm okay and right here all right now let's create a method and the first one is gonna be i'm gonna name it handle uh click show password and right here i'm gonna change the value so set uh show not confirm but password i'm gonna use this one so let me copy and let me paste just in case so no error okay and inside i'm gonna use the object and show password gonna be not show password value that show password for the confirm password let me copy two and i'm gonna use this guy the method gonna name it's kinda too long but i understand what it's for okay all right set show confirm password and we change show confirm password not show confirm password and right he can film password all right so how it's work when it's fired up this method uh so the set show confirm password and set show password value they're gonna change if it's false it's gonna change to true if it's true it's gonna change to false okay that's how these methods work and let's add this methods uh first for the password uh here's our password right here and inside of icon button let me add right here it's uh on click event and i'm gonna paste right here and inside of icon button if uh let me see if show password value that show password then i wanna show the feasibility component else i wanna show visibility off all right so let's see uh it's not exported from material ui core as this is icons and let me cut from here and i'm gonna import the icons i'm gonna destructure these two icons and that's gonna be the from material ui icons now it should be work all right let me do different way now let me copy the name of the icon let me add right here let me cut this one and let me paste for now let me copy this visibility let me cut this ctrl d select all and paste now let's see okay now we can see uh let me type let me hide uh okay it doesn't work okay let's fix it let's go back to our password input so and outline input let's add right here the type and we're gonna check conditionally if we fired up this button okay we want to show our height and we're gonna say if uh let me see the uh show password so let me copy this guy and let me add and we're gonna ask if show password while you show password then we want to show text type okay else we want to add the password type okay let me save let's see now if it's work and okay password type but we want to see the text and it's working all right so let's do same thing for the confirm password so i'm gonna copy everything i'm gonna add right here but i'm gonna change uh so show confirm password show confirm password right here and handle click show confirm password and show confirm password and show confirm password so now it's supposed to work and right here of course let me change uh confirm so let's see okay let's make a little bit wider for the confirmed password let's add 120 let's see um 140 and i think we can add 35 ah that's good all right so this is work work all right and let's add the button right here after form control uh let me create the react fragment empty container right here gonna be the button i'm gonna use them right here the attribute variant contain it let me add type submit and for now i just gonna add text sign up okay and let's see if it's display and let's style let me give the class name class name gonna be btn btn and let's add this class right here uh btn uh with let me add 100 percent height 3 ram background red and the color let's add white let me save let's see okay and let's add the icon right here uh the icon let me copy paste and that's gonna be um send shard icon and let me add to the button attribute add icon that's gonna be this guy let me save let's see uh send short okay not short like thing sharp um send sharp typo let's save all right and let me change the hover i'm just gonna add for now it's gonna be for now the color red letter we're gonna change okay and okay not the color but background okay that's for now so guys uh we're done for this video in the next video we're gonna create the validation for this form all right so if you like this video guys don't forget to click like button and don't forget to share with your friends and of course subscribe if you're not subscribed yet to not miss next video alright so see you in the next video [Music] bye

Channel: 80/20 Coding

Views: 7,461

Rating: 4.9080458 out of 5

Keywords: material ui react, react material ui, material ui, material ui tutorial, material ui tutorial 2020, react material ui tutorial, react material ui crash course, material ui react tutorial, material ui 2020, materialui, materialui tutorial, mui tutorial, mui react, mui react tutorial, react, reactjs material ui, material ui reactjs, material ui tutorial for react, material ui tutorial for beginners, material, ui, reactjs, tutorial material ui, tutorial react material ui, react js

Id: mCWN8pud1_g

Length: 55min 4sec (3304 seconds)

Published: Sun Oct 18 2020