"C" - Create and Real-time Validation | Laravel Livewire CRUD

hi everyone trash all are doing well so we're going to start off with the c48 in our lifewirecraft series now we're going to create in this episode we're going to create a new livewire component called store inside a tags folder and we're gonna do some real-time validation now everything that i'm going to do in the store right here you can do in the tag component that we created a couple of episodes back so you don't have to create the livewire component store but i'm doing this out of personal preference because i like to kind of keep my things separate right totally up to you now the next thing that i want to show you under resources view is components i've got two components that i created the alert component and a button component the button is to actually submit the form and the message one is to kind of when the session has a message of success we display the message right here now these two components right here are easily downloadable i will leave a link in the description and i'll show you right so this is the components you will see the components.zip and you have the lids and the buttons right there just make sure you copy them and paste them inside your components folder and you paste them in here right here it's under components alerts and buttons right so let's quickly create our lifewire component so you don't have to we'll quickly create this one and then we can get started so open up terminals so php artisan make livewire i'm going to call this one in a tags folder and i'm just going to call it stop right so as you can see it created the class and the view files okay all good stuff so on the app http livewire we'll see we got a new tags folder and i've got the store right there right so let's start off with the first one we're going to create a public property and this one is going to be for the name and obviously i'm not going to create an email inside that but i just want to do this for the real-time validation for anybody that might want to learn that all right so when i do save the form i'm not going to make use of it i'm just going to basically just use that for real-time validation right so that's the two public properties the next thing we need to do is we need to add some rules right so this is what we're going to use for the validation so let's start off i'm just going to create an array and inside that it's just gonna have the name okay the name field we're gonna make that required and we want to make that name unique it must be unique inside the tags table and the name title like this name column right and we want to do is we want to set a minimum amount of characters let's make it easy make it 2 and you can set it to whatever you want and we want to do a max of let's say 10. all right let's go into the email i'm just going to use the email i'm just repeating myself again just going to use the email just for validation because someone else might want to use this somewhere else and i can just learn it right here and we just want to check the email right here okay so just like that now the next thing right the next thing we're going to do is we're going to tap into lifewire's class hook called updated okay so let's just quickly create that method right so this one is called updated now the thing is whenever we type something in an input field so in this case let's say the name right there this method this hook basically fires off now we're going to use this hook to do the real-time validation on the rules that we just created right there okay so let's do that so in order to do real-time validation you can do validate only all right so this is for the real time validation if you don't want to do that you can just do validate okay so that happens so when we submit the form then it's going to check the rules only there okay so but we want to do we do want some real-time validation now the thing is it's requiring a argument as you can see right there zero arguments now the thing is you can add anything and you want i can even call this one joe so and put it in here joseph that's not going to have any effect on my validation rules all right so you can just call this one like it is in the documentation property name like this okay so you can do it just like that no problemo let's move on to the next thing this will be responsible so whenever this is basically the class book right here updated like i explained before so whenever anything happens in here this hook fires off okay and then what we're going to do is we're going to validate that but the next thing is this is going to be responsible for actually creating the tag so public function and this one is the store right here and we're just going to bring in the tag just make sure we bring in the tag model and what we want to do is we want to run the create method on it on the static method right so what we want to do is we want to set the name to this name property that we created and the next thing is for the slug we want to set that to a string just make sure we bring in it as well do this name right so i'm just going to make sure i bring this in so illuminate support string and attack otherwise we're going to get an error that those classes are not fun the next thing we're going to do is we're going to flash the session with the success message and we're gonna just say tag you can be fancy or let's be more creative for this i'm just gonna say that created and then we're just gonna reset this input fields for the name and the email okay so they can just say this reset okay so what that does is basically the input fields it just sets them to nothing okay right so the next thing we need to do is we need to obviously go to our view and we have to do some work in here so let's start off with the first one delete that and make this a section i'm just a section and i'm just going to give it a class right so just give it a class of half padding for mx auto space y4 and shadow and inside that i'm just going to create an h2 with text small and it tags indigo or 500 just like this and what i'm going to do i'm just going to say create that right so under this we're just going to create a form right so we're not going to have any actions methods like that so let's just remove that so any action attributes are removed the next thing we're going to do is we need to add a wire submit right here so we're going to use live wire to do the submitted form but we just want to prevent the default behavior of the form so prevent and we're going to set this to our store method right here so let's just add the store okay so when we submit the form it's going to call on the store method and the store is this method that we created right there okay and i just want to give this a class of space y okay let's start off the next thing we're going to do is we're going to create a div with the same thing space y and inside this i just want to make it easy for us okay so if you're using a jet stream installation you go to resources views you're going to the vendor folder actually on the auth you'll see the login right there you can copy basically the jet stream label for the email and the input fields right there so just copy them and paste them inside your store all right and then we just change them to the name now the next thing we want to do is we want to bind our y model so y model and we want to bind it basically to the name property right here so let me just actually give this name like that but before i do that i just want to add a de-bounce otherwise we're going to do a lot of requests to the server and i just want to keep that to a minimum so i just want to add a d-bounds or 500 milliseconds okay so the next thing just copy this one down and we're going to do the same thing for the email right so we got a y model dot d bounds for the email as well so just make sure you have that in now the next thing i just wanted to show you if you just put the x-jet input error this is just part of the jet stream installation okay so if there's any errors right there it will display it like this okay so the next thing we need to do is we need to add our submit button okay so if you downloaded the link you can obviously use it so we can do like buttons just like this and then we're just going to add the dot primary like this okay so that's the button that we just downloaded now there's a couple of attributes i want to add in here so i'm just going to do a wire target and i'm going to set that to the store method right so if the wire if it's loading right so what i want to do is i want to disable the button as well so attribute and we just want to say disabled all right the next thing is we want to say the button is type all submit and there's another important property right here and this is called disabled right and we're going to set it to a method that we're going to create in a second a variable called disabled i think is if we go to that button right now what i'm have having in here is we're going to happen if if the disabled is basically true disable this button right there the reason for that is if the person has any errors all right so let's say if we type in here and the real-time validation is letting us know listen there is a error then we want to disable the button or if the fields are empty we want to disable the button as well so i need to create a method for that so let's quickly at the top right here we're going to add php tags and i'm just going to hang that disabled variable and i'm going to set that to if there's any error or errors we want just want to do a ternary operator so we're going to do any so if there's any errors okay we're going to question and then we're going to set it to true else we set it to false okay so this is the button and we can disable if there is any errors or we want to check if it's empty basically this name and or if it's empty this email just like that okay so basically we're going to disable the button if there's any errors or if the input field of this name is empty and if the email is empty okay awesome stuff okay so the next thing we need to do in here is we need to add the create right here okay so now we can work with this form now the thing is we need to link this component all right this one right we have created right here to our main component that we created this one right here so if i go in here what i'm going to do i'm just as you can see the tags right there so i'm just going to reference that create right there is livewiretext.stop right so now our live wire is all hooked up to our main component right so i'm just going to close this off so as you can see we got create tags and we got the name right there and we've got the email address and as you can see the button is disabled we cannot do anything the next thing i want to add in here is the alerts so just above the title i just want to do x alerts message just like that okay so now we got our load in here as well right so let's quickly see if our validation work so as we can see already the button works quite well so we disable the button but now we just want to check if the real-time validation work as well right let's start off with the first one php as you can see the name has already been taken so if i just add one more you can see the name must at least be five characters so let's add one more again you can see it disappears but the button is still disabled all good so if i do email as you can see the email must be a valid email address and if we add email.com as you can see the button is displayed right there so if we create this you can see we get a message that created and it disappears right there all right so that's an end of this episode if you guys have any questions feedback or suggestions please ask them for me in the comment section i'll gladly respond to them and please give this video a like it helps out the algorithm for youtube and i kind of want to get the videos empty so thank you guys see you in the next one adios

Channel: AngelJay Academy

Views: 385

Keywords:

Id: MkpPPS8HpWc

Length: 14min 52sec (892 seconds)

Published: Thu Nov 11 2021