Livewire Form validation and solving weird modal issue in Laravel Livewire

all right welcome back to the another video on building multi-purpose laravel and live well application so in this video we'll be working on form validation using livewire and we'll be saving those data to the database so let's get started and before moving ahead uh let's fix this part first uh here i i don't see any active link and this part is not working so let's fix this let's let's head over to resources views layouts sources views layouts partials and aside.php file and over here if we add the active class then this link this part will be active so let's make this dynamic so the request is admin slash uses then let's make it active otherwise let's do nothing okay also let's add the route here route admin that uses as we have defined on web.psp file here okay now let me refresh the page and let me go to dashboard and it come back to users and it is working perfect now let's start on form validation part so if someone submit this form here it is not working it is it is not displaying anything so let's do this now let's go to list users that blade.php file which is inside of our resources views livewear admin admin users and these two users okay now let me move this form element here okay and let me remove it from here and after closing of this tip let me paste let me let let's close this form part okay so we can do button type summit here okay so now someone submit this form wire summit let's prevent the default action and let's do create user so we need to create this method inside of list users component class okay over here which is inside of resources which is inside of app sorry app http library admin and users list user okay so let's create that method called create user let's tie and dump here okay now let's try this out if we save if we click on save button now we should just now we are seeing this output so actually this is working okay now so now we need to do wire model to get the input now that user entered so let's do that part let's go to list user operator psp and over here let me do wire model goes to name okay now instead of list users let's create that property called name okay now let's try this out if we entered something here then we see some weird issue while using libraries so we don't see any error here so actually while using la wire model uh it sends a request to the server when we make any changes to the input so to fix this let's use wire model the differ the only difference between wire model and wire model default is that where model sends multiple requests to the server once we make changes to the input elements whereas where model refer only sends one particular request to the server when you click the save button of the form so let's use wire model the default instead of wire model okay now let's try this if we make any changes over here then it is working we are not seeing the issue like before so if we if we hit the save button it is working as well so now let's do a wire model here as well where model 34 goes to email and here wire model 34 equals to password and here where model the d4 equals to password confirmation okay now we need to create those properties otherwise we will get error when we save let's do something here yeah it is saying property may not found on the component so we need to create that property so public dollar email public passport and public password confirmation okay so instead of for creating this multiple properties i prefer creating one particular property called state and let's make it empty by default so let's remove everything from here will be more cleaner than before so now instead of list use stud blade psp file let's change to state dot name and state that email and state that password and state that password confirmation okay now if we do time dump this state then we should see every input that user made okay let's try this out let me use form filler and then save yeah we see password confirmation password email and name we are getting those input okay perfect now let's validate those input now currently if we submit if we click on save and we are not profiting any kind of validation so now let's validate it let's do validator make the validation for those state and the rules are name is required okay and email is also required and should be email answer be unique in users table and password is also required and should be confirmed with password confirmation okay now over here it's called the validate method and let's try and dump here okay so now let's pull this validator yeah i pull this class let's save this file and let's check now if we if we enter something let me use form filler it fills the form and let me hit the save button it is saying that best table of view not found so first we need to uh we need to create the database let go let me go to psp my admin login over here i have already created the database which is currently empty called arrival library so let's set this up okay let's move to the env file and let's change here laravel live fire and for me the user name is admin and password is password123 yeah enter your credentials and let me do php audition config cache okay now let's do psp addition migrate yeah now those tables are created over here now let's try by clicking save button again again we see one weird issues that model is hiding and we see this we see this screen so to fix this we need to do let's go to list user template the psp and we need to ignore the dome changes so we need to be careful over here so instead of this instead of this main deflex 2 wire ignore so now let's uh do let's fill up this form and let's let me hit the save button and this is working we don't see that issue anymore so this is working okay now if we don't write anything over here and click on save then we don't see any kind of validation so let's do that now now let's go to get put strap okay now let me search for form validation okay over here we need to use invalid feedback to display that to display this hand design okay so let's try this out first class valid feedback the name release required let's try this out it's not working so we need to do is valid i think yeah so let's make this dynamic so if there is either for name then we'll be displaying this div okay and here and here let's display the error message and over here as well if there is error for name then use this class so otherwise don't use that class now let's refresh this page again and let me click on add user and save it yeah again we see some weird issues yeah we don't see any console error as well so what is going on so to fix this we need to we need to go over here and see the wire ignore actually where ignore ignores every dome changes for children element as well so to fix this we need to do wire ignore that itself so that it will only ignore this particular development not the child element okay so we need to be very careful over here so we need to do wire ignore itself instead of wire ignore okay now let's see if this works yeah it is working perfectly fine this time okay now let's do the same for email password and confirm password as well so let me copy a discord and over here let's press this and this is for email also we need to do here here there is error for email then we need to display is invalid class okay and for password let's do the same for password and let's add in this invalid class okay now let me refresh and try this again yeah everything is working i think if we change to name then this validation should be removed okay and if i change to john so first let remove that html validation over email let's make it disk text check this out okay so it's on john and if we save then it is displaying another validation error so this is working perfectly fine so now let's go to list users and let's you know save those data the save this validated data is validated data and let's dive dome validated sorry data with the validation passed i forgot the semicolon so if the validation is passed then we are getting those validated data okay perfect okay now let's save those validated data instead of database so to do to do that let's do user create with validated data and written redirect back so let's pull this user class okay user class it's imported user model is imported so let's try this out and let's fill up this form and click on save there now i think we are saving this data to database so let's go to users yeah those data are saved now but we are not hiding the model when we click on save yes we are not hiding the model it is displaying over here so we need to hide this model so we can use to hide this model we can do we can dispatch the browser event to hide the model so let's do after creating the user i need to hide the model so let's do this dispatch browser event called hide form okay now let me go to resources views layouts app and over here at the end let's do window dot add event listener called hide form and let's do find the model with idea form and let's do model hide okay now let's check this out let's fill this form and click on save yeah the model is hiding now this is perfect also we are saving those data to the database yeah this is good now let's dynamically display the data over here okay now to do this let's go to list users and over here let's use for each users is user and and for its okay now if we refresh this space we see this here here called undefined variable users so we need to pass the variable from list users yes over here let's do user get the latest one and present those okay now let's do users and user so that so that we'll have access to the user variable users variable okay we have already pulled the model so now i think it should work yeah we are displaying these free data from database so let's make this name an email is dynamic as well okay let's go to here and this is user name and this is user email okay yeah this is working now to make this one two three let's do loop iteration let's remove this yeah okay now this is working perfectly fine so one thing we forgot is to decrypt this password so let's do that let me go to list users and over here let's do validated data and for the password let's do the equipped data password okay now let's try this out let me fill up this form click on save yeah now we created the data and we also decrypt that password perfect so i hope you like this video so don't forget to like share and subscribe to this channel i was i will be uploading the videos like this and in the next video we'll be working on editing and deleting those data so till then have a great time and i will see you in the next video

Channel: Clovon

Views: 9,164

Keywords: coding, tutorial, laravel, laravel and livewire tutorial, laravel and livewire, laravel and livewire project, laravel admin panel, laravel adminlte, laravel admin, livewire tutorial, laravel livewire tutorial, laravel application development, learn laravel 8, learn laravel framework, learn laravel, laravel crud, laravel crud tutorial, spa, laravel how to, laravel tips, coding tips, adminlte with php, laravel fortify, livewire events, livewire, laravel livewire popup modal

Id: AKX-SJ2zMG8

Length: 22min 36sec (1356 seconds)

Published: Tue Jan 19 2021