Create Form and Validation With Shadcn UI | NextJs 13

welcome back everyone today I'm going to be showing you how to create form with next CS app router and also we're gonna use set C and UI and as you can see this is the project that we are going to be building and basically we are going to create three pages the first thing is the home here and we have also sign in form and also sign up form and also you're gonna working with the validation as you can see if I go to login if I click login without giving any value we get the email is require and password is required and also if the email is not valid we have invalid email this is also working inside the sign up if I hit register we also get the validation here and yep for this video we just create the UI but for the next video we are going to working with the database and hopefully you are going to use Prisma and yep that's it for the introduction of this video so what we need to do first is I'm going to install a nexjs with typescript and also Talon so let's go to set CN documentation go to installation next to us and I'm going to copy all of this command here I'm going to I'm going to use npm so let's open the terminal again I'm going to paste that right here and also for the application name or the folder name I'm going to remove this next app and I'm going to say next JS out just like that and yep we can just say enter you should give us question would you like to use Source I'm going to say yes a router of course so I'm going to say yes import Alias I'm going to say no and it will be install all the dependency for us just wait for that after it's done we need to install the set C and UI right here right nice it's done so now we can say CD into the next JS out folder and from here we are going to open the inside Visual Studio code so now we can open the terminal and we can say npm run a Dev to start the localhost 3000 so as you can see this is what we have is the loading it's still compiling down here and here we go great so this is the root of our component basically our next JS application and what we need to do now is I'm going to let's first remove all this default value default content inside a page I'm going to remove all of this let's remove that and I just want to Let's also remove everything here I think so now I just want to say heading 1 and let's say home just like that and in here I'm going to add class name because we're using Talent so you can say like tax XL just like that so as you can see we have home right here so in the layout here I'm going to give some styling so these children here is to be inside the main pack so I'm going to say Main and put the children and also here I'm going to say class name and the hick I'm going to say screen which is 100 view cake I think yeah 100 view week and also the display I'm going to say flex and flex Direction I'm going to say Flex Direction Flex column Flex Direction column and also the justify content I'm gonna say Center also the item I'm gonna say Center as well great so we have home right here but I'm not sure why the text it should be to XL it should be more bigger than this I think let's do for XL oh yeah cool so what the next thing we need to do so let's create the enough bar so I'm going to create another folder inside this Source I'm going to say components like so and inside this component we have enough bar file so we can say enough bar dot the SX great so in here I'm going to say error fce and let's just import the nav bar in here so I'm gonna do let's say wait nav bar just like that so now we have the nav bar in here so let's just dial in this enough bar a little bit let's go back to navbar and here I'm going to remove the text enough bar and in here I'm going to say background and then I'm going to say zinc I'm going to select 100. and also the padding Y which is practically I'm gonna say two and also the Border bottom let's say border bottom let's say border small and Border small to let's say zinc I'm going to do 200 and also the position it should be fixed and the width I'm going to set that to full and also the Z index let's say 10. great so inside this div here I'm going to create another div like so and inside in here we have it's kind of like login button so now it should be right here I'm not sure so I think we can say uh top zero here we go as you can see login is now on the top great before we continue uh typing a lot of styling now it's better to install the set CN UI so let's go to set CN installation and go to next JS this is what we're doing first and then now we need to say sets the end UI add letters in it so let's copy that and I'm going to open Terminal let's paste that right here as you can see we also have some question would you like to use typescript I want to say yes uh The Styling I'm going to say default slat is fine the where is your Global CSS file so basically I want to change the file into I want to say sourceless uh style so I'm going to create style folder inside the source here it's it will be uh same level with this app and component here so in here I'm going to say uh globals.css hit enter and would you like to use CSS variable and say Yes uh the talent config it should be on the root so I'm going to say enter and just say enter Library until it is it should be create the lib folder inside this Source I think it's okay so I'm going to say enter and rear component react server component I'm going to say yes and yep it will be as you can see now we have style folder and inside the cell for the folder we have global.css and we have a lot of thing here we have the talvin talvin base component utilities and we have this variable here it's great so now what we need to do let's say npm run Dev again I'm going to zoom out this little bit and let's go to talvin.config now we have this container and we can use this container now so let's go to the nav bar and here we can see last name and then container like so so now when I save that as you can see it's not working alright so now it's working what you need to do is just restart your vs code and it will be working so as you can see now we have it's kind of like space here this is indicated that it working it will be inside this content and if I do like background red for example 400 and as you can see this is what we have all right this is the container look like really great so let's remove the background nice and the next thing what we need to do is I'm going to put the icon in the left and login button in the right so inside this container I'm going to put uh the first thing is Link Link is going to become from next link and this link should have rough props so we can say graph like so it should be go to for slash which is in the home and this is going to be the logo and down here we have also the link like so this link is should be go through the sign in like so let's save and let's take a look what we have so the sign in here I'm going to put that into the right side so I can say uh Flags here so we can say flags and then I'm going to do item to Center and also to justify to between so as you can see now the sign in in the right and the logo in the left great so now we need to let's go back to the set CN and I'm gonna looking for button so let's go button here and as you can see basically we can style in the link here it's kind of like button so you need to import the button variance so let's go back here and in this link I'm going to say class name and what we need to do let's say button variance should be button variance oh we don't yet install the button so first we need to just uh do npx set cnui lattice add button so we need to just copy this and let's open another terminal and we need to just paste that right here ready to install component and dependency I'm going to say yes now we should have a UI UI folder inside of components and when we open that we have button.dsx great so basically what we need to use is this button variants inside the links okay so let's go back and now we need to say button variance like so and we need to run the function just like that and when I save that and let's go back and it should be working or it's not working the reason why this button is not working The Styling is not applied and this button is because remember when we install style we put the Styles inside the Styles folder here the global CSS inside the Styles folder so what we need to do is let's go to page here and we need to note pitch but layout in the root layout and we need to change this Global CSS place so now we need to just remove this and we can say app slash style slash globals.css so now when I save it should be working all right because as you can see inside a component here we put the global CSS inside the source and because this is a source we can change that with ADD symbol like so all right great uh I think I'm going to let's go back to the button so I'm going to go through the button and as you can see in button here we have kind of like logo or icon as you can see here this icon here it should be come from the Lucid react and it's called mail right here because when we install set CN we also install the Lucid react so let's take a look what is this so let's take a look the list of the icon so we can use that as you can see there's a lot of icon that we can use and basically I'm looking for metal icon just right here so I'm going to click that and it should be open the down here as you can see you can copy the GSX or just copy the SVG I want to use the TSX I'm going to copy that go back to navbar and in here I'm going to put the wait the and metal logo somewhere I'm going to import that from Lucid react I'm going to save and now we should be able to have this really nice icon here great so now if I click sign in it's going to be crass because we don't have the sign in page all right so I'm going to close everything here and now we need to create a page so let's open source and then inside the app here I'm going to create folder and I'm going to grouping that inside the out for out grouping like so and inside that I'm going to create folder called sign in just like that and set the sign in here I'm going to create file called page.dsx and I'm going to say rrfce and let's remove the react up here I'm going to say sign sign in just like that so now we have this sign in great so inside out here we can also create the sign this up folder and inside the sign up folder we can also create the sign up Dot it should be pitch.ds page dot DSX great so now we can just copy this place that to sign up and now we can change this to sign up great so now when we go to sign slash up sign desk up now we're on the sign up all right everything look working so now let's working with the form so now what we need so now let's create the form component so I'm gonna go through the components folder and inside a components folder let's create a folder called form so inside this form I'm going to create a file called I'm going to do sign in form let's do sign in form dot DSX and again I'm going to say error fce like so and I'm going to import the sign sign in Forum inside the page here and also let's try to change the background to red400 just to kind of see the sign where's this this should be signed in right no this is sign up I'm doing wrong here so let's copy that paste that to the sign in here like so of course we need to import the sign in form and let's remove this just like that okay so now as you can see we have this right here and I'm going to set the width into full like so and as you can see should be like so and if I go to sign up as well if I do class name background let's say blue 400. and when I go to sign up it should be oh yeah we need to set the width to full again so you can see as you can see it will be same thing here so how do we styling this sign in and sign up so basically the the best way is to put the layout inside out here so Inside Out folder here we need to create a layout dot TSX great so this layout here is basically like a component this is Will becoming the root of the sign in and sign up so I'm going to remove the name I'm going to say out layout like so and the name it doesn't matter basically so as you can see now we have out layout in the sign up and also in the sign in great so this alt layout it should be like a children so let's grab the children someone say children like so and the children it should be inside this div so you can see children so now you can be able to see sign up and also sign in right and here as you can see we have the uh warning come from tab script here so we need to fix that so in the top here I'm gonna say interface out layout props set equals to should be object and I can say children these children here it should be react note like so and we can put the props inside in here you can say this should be functional component and should have this out layout props like so okay great so here I can add styling so I can say class name I can do background slate 200 so let's take a look uh I think I'm gonna do padding to 10 to kind of see here as you can see the background and in here I'm gonna do also the rounded so let's say around it I'm going to let's say medium and as you can see we have the rounded great if I go to sign up it also have the same styling all right great so let's close the layout and now let's working with the sign in this sign in here let's remove the background great so let's go to sign in form and what we need to hear is the first thing let's add the form from set CN so let's looking for form or we can say command K and I'm not looking for form and hit enter it should be open the form where is the form let's do that again form hit enter oh here we go so the form here is come with a react hook form and also zot by default so let's see how we can install that so we can do npx sets and UI lattice and add form we can copy that open another terminal and I'm going to paste that right here and hit enter and the reason why I put the form to another file like this why I not put the form just inside in here why I'm not remove this and put all the form in here that is because form is should be client component I don't want to my bits to becoming a client component I need to still set my page to the server and then set this sign in form to the client component so in here we can set that to the client component we can say use client like so it should be inside the quote use client just like that so here we can say yes all right it's done so let's close this terminal and let's see what we have so inside the components here we have the UI and then as you can see now we have form and also we have label great so let's take a look how that we can use that so here this is how we create the schema for validation with zot and down here let's take a look and I think we are going to just copy and paste come from the input here I think let's click that and go to code and as you can see this is the form look like so yep I think we need to just copy this forum here let's copy that copy and paste that to your sign in form so I'm going to remove this div and put that like so there's a lot of error of course and the form it should become from the UI slash form and also this form here is basically let's looking for that the form is basically this one I need to just copy that and paste that right here all right so we need to also import the use form come from react hoop form I believe I have video about react hook form if you want to check that out I'm going to put a link in the description so the Z here it should be come from let's take a look what does Z come from it should be the zot so let's import this dot here import everything as a z from zot create the firm screamer let's take a look from schema this one I'm going to copy that and paste that right here great we have the example of username here nice and the zot resolver is basically come from the hook form resolver zot nice the on-site mid here is a p function so let's do cons Ole main set equals to Arrow function like so and I just want to say console log let's say form submit it like so and the form field it should become from the UI from item come from the UI label as well from control as well and the input it should be I'm not really sure where is the input come from so let's take a look here I'm going to see the input I think the input have a different command for install the input so let's go through the input yep we need to install the input so let's open another terminal here and we need to install it the input enter and again we need to say yes I think for install the input I want to say yes and it's done really fast great let's close this and we need to import the input oh the input should become from the UI and the form description we're not going to use that let's remove it and the form message plus uh I think we need to import that as well like that and the button we need to import from UI Barn nice it looked clean let's take a look what we have as you can see we have this username here with this input here great so now let's remove this class name here because I don't want to have something like maximal weight in this input so I'm going to remove that and I'm going to set that the width to full like so and instead of username I'm going to set that to email and also the form level it should be email as well and the validation up here I'm going to change that to email and also let's just remove this minimum here we just have string for now it's okay so now let's just copy the form field we need to create the password so I'm going to say password and it's going to be password and also the placeholder I'm gonna say enter your password just like that and we have warning here because we don't have a password validation up here so let's type in that I want to say password and here I'm gonna say zot into let's say string for now all right so now let's take a look we have email and also the password Here great I'm going to wrap this form field inside another div and inside this div I'm going to add class name call this basically space vertically I'm going to set that to two I'm going to put all this form field inside the this div here just like that great so now we have some space here and now inside the button here I'm going to say class name the width I'm going to set that to full and also the margin top I want to set that to maybe six save and here we go and also the submit here it should be uh sign in sign in like so all right nice so let's reset the zoom in here and when I click that as you can see we have some kind of like validation here but I don't want to set the label here to Red I just want to set that to the black color so as you can see uh here we have from label right so we can open the form level uh I think you can go to UI and then form and then we can look search for form level like so this is the form level component and down here as you can see when the error is true we add the text destructive here that's mean it it will be coming red so I don't want that so I just want to remove all of this and just put a class name class name like so so now it's not gonna be red anymore so next I'm going to remove the space between the label and the input so let's go back to the sign in form and as you can see this is the form item wrapping all the component so let's copy the name of the form item let's go back to form and I'm going to look in for form item component now so let's see this is the form item so as you can see inside a form item component we have the space vertically to two okay so here I just want to remove that and just put the class name for now so let's just remove this basically you can change whatever the class you want here you can say like background red 500 if you want it's going to be red right here you can do whatever you want I just want to remove that so let's remove this and change that to just go last name all right now the space is gone and nice great so now I just want to copy and paste this code here so I'm going to paste that right here so this is basically just kind of like this styling here and down here we have b-tech and it's gonna be if you don't have account please down here I'm gonna put the link to sign up just like that down here I'm going to render link come from next link and this link here have a text called sign up and also it should be half rough it's like kind of like anchor stack and it should be go through the sign up page just like that and I'm going to add some last name last name set equals to text is going to be blue I'm going to do 500 and also when I hover that I need to have underline effect so let's save and as you can see when I hover we have underline effect and when I click this it should be go to sign up great so now let's working with the validation let's go back up here and what we need to do next is inside this on submit function here we can grab the values so this value is basically have this type here so I'm going to copy that and paste that right here just like that so here we can just console log the values so you can say values like so so now if I open the console and let's take a look when I click sign in let's give a value here as you can see we have email and also the password so now let's fix this a little bit the email it should be string and also it will have the minimal value the middle the minimal value is one character and if there's no character in there I'm gonna say uh email is uh let's say required and also I'm gonna add the email validation and if the email is not valid I just want to say invalid email just like that and for the password let's do the password I'm going to say something like this and this password here should be string and also this is going to be it should be have minimal value also one the minimum value is one and also I'm gonna say password is required and down here I have the minimal ache as well and the error message it should be password moose have uh then egg characters just like that great so here if I not typing anything as you can see we have password is required if I do one here password which half then eight character great it's so really easy right the email here it should be uh the label I'm going to change that to something like mail add example.com something like that and the type I'm going to set that to let's say type to email and also for the placeholder I'm gonna say type to I'm going to say password okay great so now I'm gonna say uh random something here click sign in as you can see um oh yeah I think we don't really need to use the default uh type from the email so when I click that as you can see we have email invalid email photo email at random Dot com as you can see this is valid and the password also is going to be valid all right create our sign in form is completely done and uh yep it's done so now let's working with the sign up here and let's go back to the sign up let's remove the background here and what we are gonna do is I'm going to create another form here I'm going to say sign up form dot DSX just like that and basically we just can copy all of this content from sign in and paste that to sign up right here and we can change this to sign up for right let's save that and let's go back here and we need to import the sign up form like so great so now inside the sign up we have something like this and inside oh we need to change that so let's go here is going to be sign in and we need to change that to sign in as well we can go back to sign up sign in sign up all right great so in here we need to basically takes the input field let's see what we need to change here so let's copy and paste this form field I'm going to copy that and paste that in the top here and for the name I'm going to say username for the label I'm going to say username just like that and also for the placeholder I'm gonna say like John Doe right here and let's take a look we have username email password great and also down here we need to have gonna like uh repeat the password so for the name I'm gonna say let's say confirm password and also for the level I'm going to say re-enter your password like that and the placeholder it should be I'm gonna say something like this same like this label here I want to put that like so and the type I'm gonna do uh password just like that and let's take a look we have username email password and re-enter password great so the sign in here should be sign up let's change that sign up great and we need to also add the validation so up here I'm going to say user name it should be string order to set Dot string like so nice and why it is not working let's refresh and if I click sign up as you can see we have required it's great and I'm going to add the minimal value here I want to say dot minimum it's gonna be one and the error it should be I'm gonna say username is required and also I'm going to add the maximal value for this input I'm going to set that to 30 character I will say 100 character writing all right nice and also down here I'm going to add the confirm password so let's say confirm password and it's gonna be Z Dot and I'm going to say uh it's going to be string and also have the minimal value and it's gonna be one and also the error I'm gonna say password confirmation confirmation is required just like that it's great so now let's take a look when I click sign up it's required so now what I'm showing you is the this re-enter password how if I typing one two three here one two three one two three and for the re-enter it's not same with this password but we don't get the error how do we put the error here if the password is not matched so simply we can add something called refine down here I think we can say something like this okay we have uh Z object and also down here we have kind of like refined I think yep refine function and then here we grab the data and here we can say data dot password and set equals to data Dot confirm password right and we are going to add comma here and here I'm going to specify the path but it should be the confirm let's say confirm password but it's basically where the error message that you want to show so in this case we need to showing the error when the password is not matched inside the confirm password field all right so what the message so we can say message and the message should be password do not match great so let's see if I hit sign up as you can see we have the password to not match if I do one two three one two three one two three again now is match and as you can see we have the value in the console great and we can add the default value of also if you want here the email is the default value and the password empty you can add also the username if you want and also the confirm password down here it also empty string all right so we can go back to sign in sign up correct the last thing is I'm going to add the sign in with Google down here so inside a components folder I'm going to create component call I'm going to do Google sign in button like that dot the SX and in here I'm going to say error ifce and this is the basically just a button so let's render a button like so and this button have a text the text should become from the children the children it should be gone from the props so let's grab the children here and in typescript of course first we need to create the interface or type I'm going to say Google sign in or the name is wrong here my bad so let's change that to Google sign in by like so and it's going to be Google sign in button now this interface here have uh props called children and these children is basically react node great so here we can grab the children like so and when I hover this this is half a type any because we don't put the Google sign in props this is going to be props and we are going to put that as uh props in here this is basically functional component and I'm gonna put the type like so all right it's look great and here I'm going to add class name class name should be width to wall and also I'm going to add on click event here let's say on click when I click that I'm going to run function call login with Google so let's create the function I'm going to do up here so let's say cons login with Google set equals to error function for now I just want to console log and log in with Google just like that great so now we need to import the Google sign in button into the form so first I'm going to import that right here down here we need to say Google sign in button and basically this is half should have for children so we need to close the tag like so and we need to import so the children it should be I'm going to say sign up with Google just like that so you can just copy this go to the sign in form and we can just paste that right here just like that and we can import this and we can change this sign in with Google all right so as you can see here we have sign in sign up with Google when I click that it should be running the function great when I go back to sign in it's also working great everything look working perfectly fine if I zoom out a little bit if I click sign in email is required if infinite email the password is great and of course the validation here is also working username require email the require invalid password [Music] yeah great everything look great so that's it for this video guys thank you so much for watching and see you in the next one

Channel: Cand Dev

Views: 21,654

Keywords: form validation, secure sign-up form, secure sign-in form, React Hook Form, Zod validation, Shadcn UI, Next.js tutorial, form handling, React forms, form validation tutorial, frontend development, web development, JavaScript forms, form validation best practices, form security, form design, form validation with Next.js, React form validation, frontend frameworks, UI libraries, modern web forms., nextjs app router, react form, shadcn form, shadcn ui form example, login

Id: GkpEWkKQego

Length: 43min 52sec (2632 seconds)

Published: Thu Jul 27 2023