Multi Step Form Using Laravel & Livewire

hello friends in this video we are going to see how to create multi-step form in laravel with livewire this will help you while you have a long registration form of your laravel project where you can divide your form into sections we will learn how you can validate each current step form elements let's get started [Music] create new database and rename to multi-step form then use this database name to dot end file at db underscore database variable open terminal and run php artisan make colon model student dash m command that command created the student model file and also we have the students table migration file let's add more columns on this students table this table will have first name last name gender age email phone description country city frameworks and cv columns let's define feeble columns array in this student model after that go to terminal and run php artisan migrate command as you can see we have now tables inside multi-step form database and also students table had been generated go to web.php file and add new root view for registration form let's create this view blade file we will use bootstrap for this layout open new terminal and enter php artisan serve command for running our project as you can see we are on laravel 8. let's access our register route as you can see we have now a register page before continue we have to install livewire in our project just go to google and search for laravel livewire click on first link this is an official website for laravel livewire click on docs link on this page you will see how you can use livewire in your laravel application to install livewire in our project we will use this command go to terminal and run composer require live wire command then wait for installation once livewire downloaded and installed into project we have to include livewire css and javascript files on register page copy this livewire styles and paste inside head tag and copy this livewire scripts and paste inside body tag before closing body tag now livewire installed into our project let's continue design register layout using bootstrap classes let's create livewire component that will hold register form here just go to terminal and run php artisan make colon livewire multi-step form command as you can see our live wire component have been created and also livewire class file have been created our form will be inside here let's add this text for testing to include live wire component on blade we can use this live wire directive just make sure that this text is the same to this component name as you can see we have now this message from livewire component let's add register form here just go to our livewire component and replace this with form let's add card that will have form inputs for first step this section will contains input fields for personal details now we have our first step elements card where user will fill first name last name age description and select gender let's add section 2. this section will contains inputs for address and contacts where user will fill email address phone city and select her or his country of residence let's add section three now we have third elements card where user will choose frameworks he or she knows let's add section four now we have fourth elements card where user will attach cv then agree with terms and condition let's add action buttons below this card this back button must have type attribute of button this next button must have type attribute of button and this submit button must have type attribute of submit now we have these action buttons here so our register form will have these steps let's add wire models to every element of this form then after add error spans under each element where validation errors will be displayed back on multi-step form livewire component class file this line is important if you have input file element for uploading file then import student model here like this now it's time to define form properties we have defined our form properties inside multi-step form livewire component class we have four steps in total but our current step is equal to one by default inside this mount function let's set this current step equal to one now it's time to split our form into steps according to the current step value this first step card will visible if the current step is equal to one this second step card will visible if the current step is equal to two this third step card will visible if the current step is equal to three lastly this four step card will visible if the current step is equal to four for this step one development add this if blade directive this means that this card will be visible only if current step is equal to one apply the same logic to the step 2 step 3 and step 4 sections let's test as you can see we have now only first step card because the current step is equal to one let's display these buttons according to the current step value this divided element will be visible only if the current step is equal to one this back button will be visible if the current step is equal to 2 or equal to three or equal to four this next button will be visible if the current step is equal to one or equal to two or equal to three and this submit button will be visible only if current step is equal to 4. let's test as you can see we have only next button for the first step stage let's add wire click function to the back and next buttons this button will decrease step value and this will increase step value let's define these two methods inside multi-step form livewire component class inside this function increment current step value by 1. but if the current step value tends to access to the total steps this value will be equal to the total steps value inside this function decrement current step value by one but if the current step value tends to be less than one this value will be equal to one let's test now we are on the first step stage if we click on the next button we can go to the second step form stage and if we click on back button we can back to the first form stage let's click on next button again as you can see we are on the second step form stage if we click on this next button we are now on the third step form stage if we click on next button we are now on the last step form stage this will be the fine step where user will attach her or his cv and agree terms and conditions if we click on back button we back on third step stage now if we are on final step form stage and try to click on submit button we have this error message that show us that the register method is not defined in multi-step form livewire component class let's continue let's add register method here now it's time to validate our form let's add this validate data function where we will validate inputs from step one step two and step three if current step is equal to one first name must be required and string last name must be required and string gender must be required age must be required and digits if current step is equal to 2 email must be required be an email format and unique in students table phone must be required country must be required city must be required if current step is equal to three frameworks must be required be an array format with minimum of two items and maximum of three items we will call this validate data function inside this increase step function first reset error bags then call validate data function here before increase current step value these two lines must be called before increasing value of current step value and reset error bags before decrease current step value let's test our validation if we click on next button without filling required fields we have the validation errors displayed under each element and we don't going to the next step because of validation this means that we must fill all required fields in order to go to the next step of form but if we filled all required fields and try to click on next button we can go to the second step and we can going back to modify previous details now if we are on second step and try to go to the next step by clicking on this next button we have the following validation errors this means that we must fill all required fields in order to go to the next step of form but you can go back to the previous step and if you make a mistake on previous this will not allows you to go to the next step until you correct that mistake now let's try to fill all required fields on this second step if we filled all required fields on second step and try to go to the next step by clicking on this next button this will redirect to the third step of registration in this step user can select at least two frameworks no more than three frameworks of her or his choice if we click on back button we can back to the previous step which is second step and we can also back to the first stage as you can see all filled fields are still having their values we entered let's go to the third step if we are on third step and try to click next button without check at least one of framework we have this validation error that show us the frameworks are required if we select one framework and try to click next button validation error will tell us that we must select at least two items but if we check two frameworks and click on next button this will bring us to the step four of our registration form if we go back to the previous step and try to check more than three frameworks and try to click on next button this will give an error that show us that we must not have more than three frameworks checked instead of going to the next step but if we uncheck one of framework and try to click on next button this will bring us to the next step which is for now it's time to validate these two elements when we click on this submit button back to multi-step form class and update this register method first reset error bags if current step is equal to 4 cv must be required with one of these extensions terms must be accepted let's add this die dump for testing if validation is successfully done let's test if we try to submit without attaching cv and accept terms and conditions we have these validation errors if we attach image file and try to submit form we have the following error that show us that the attached file has wrong extension but if we choose doc file and try to submit a form we don't have any cv validation error if we check this check box to agree with terms and condition and try to submit form we have this message that show us that we can submit a form let's continue here we can upload cv file first if cv uploaded we have to insert student data into database if data inserted into database successfully reset form and set current step to 1. let's test now register new student for the first step fill personal details of student for the second step fill address and contacts of student for the third step check at least two frameworks and for the fourth step attach student cv and agree with terms and conditions now if we click on submit button this will redirect us to the first step of our form this means that the student has been inserted into database let's check in our database as you can see that student had been inserted into the students table and her selected frameworks inserted into table cv file name inserted into this this is the uploaded cv file here let's redirect registered student to the thank you page instead of going back to the initial stage of form go to web.php file and add new root view for registration success page let's create this view blade file now comment these two lines then redirect this user to the thank you page after registration done then pass this data into this route let's test now register another student as you can see when student registered successfully he or she redirected to this thank you page by looking into database we see that student has been inserted into students table friends this how you can make multi-step form wizard in laravel with livewire if you are new on this channel please subscribe in order to be notified when new video is uploaded on this channel thanks for watching this video

Channel: Irebe Library

Views: 3,891

Keywords: irebe library, multi step form livewire, laravel multi step, how to make multi step form, livewire

Id: sNzhrqVC4CI

Length: 42min 11sec (2531 seconds)

Published: Thu Jul 22 2021