Multi Step Form Submit in Laravel 8.x with Validation

In this tutorial we will go over example of multi page or multi step form in Laravel with validation. This tutorial does not use any javascript component to create multi step form.

Instead we will create multiple form pages and will use Laravel session to save the intermediate data. If you don't know how to create laravel multi part form, i will help you. In this multi step form laravel tutorial, hope you will learn something new.

So when a user hit submit button, then laravel form with next button will appear to him. And then agian next, next and final step. We are going to create something like that. Here i will use laravel session to save user inputed data.

If you follow this, then you can create with your own code laravel registration form step by step tutorial. So let's start our new tutorial laravel multi step form example from scratch.

Before starting on to this tutorial make sure you have a Laravel Setup Ready and you have connected it to a Database. You can take help from below tutorials for the setup to get started.

Preview step 1: 

Preview Step 2: 

Preview Step 3:

Preview Step 4: 

We are creating a Multi Page Form to Insert data into the database. You can use this example for any of your Multi-Step Form Submission with Validation in Laravel. 

To give a brief about the Multi-Step Form. The Form will consist of three pages before the results are stroed in the database

• First page will have the form fields to get name
• First page will have the form fields to get description
• Third page will have the ability to upload image for the user

Step 1: Install Laravel 6 Application

In first step to create multi page form validation n laravel , if you haven't laravel 6 application setup then we have to get fresh laravel 6 application. So run bellow command and get clean fresh laravel 6 application.

composer create-project --prefer-dist laravel/laravel blog

Step 2: Create Register Model

Let’s set up a register model along with the migration file

php artisan make:model Register -m

Let’s now go ahead and modify the migration file to add the required columns.

public function up()
    {
        Schema::create('registers', function (Blueprint $table) {
            $table->bigIncrements('id');
            $table->string('name');
            $table->longText('description');
            $table->string('productimg');
            $table->timestamps();
        });
    }

After create "registers" table you should create Register model for register, so first create file in this path app/Register.php and put bellow content in register.php file:

app/Register.php

namespace App;

use Illuminate\Database\Eloquent\Model;

class Register extends Model
{
    protected $guarded = [];

}

Step 3: Create Route

In this is step we need to create two route one for render treeview and second for add new category file. so open your routes/web.php file and add following route.

routes/web.php

Route::get('/register1', 'RegisterController@createStep1')->name('signup');
Route::post('/register1', 'RegisterController@PostcreateStep1');
Route::get('/register2', 'RegisterController@createStep2');
Route::post('/register2', 'RegisterController@PostcreateStep2');
Route::get('/register3', 'RegisterController@createStep3');
Route::post('/register3', 'RegisterController@PostcreateStep3');
Route::post('/remove-image', 'RegisterController@removeImage');
Route::post('/store', 'RegisterController@store');
Route::get('/data', 'RegisterController@index');

Step 4: Create Controller

In this point, now we should create new controller call CategoryController in this path app/Http/Controllers/RegisterController.php. In this controller we will manage route method, i added two method in this controller as listed bellow:

app/Http/Controllers/RegisterController.php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class RegisterController extends Controller
{   
    public function index(Request $request)
    {
        $request->session()->forget('register');

        $products = \App\Register::all();

        return view('register.index',compact('products'));
    }

    public function createStep1(Request $request)
    {
        $register = $request->session()->get('register');

        return view('register.step1',compact('register'));
    }

    public function PostcreateStep1(Request $request)
    {
        $validatedData = $request->validate([
            'name' => 'required|unique:registers',
        ]);
        if(empty($request->session()->get('register'))){
            $register = new \App\Register();
            $register->fill($validatedData);
            $request->session()->put('register', $register);
        }else{
            $register = $request->session()->get('register');
            $register->fill($validatedData);
            $request->session()->put('register', $register);
        }
        return redirect('/register2');
    }

    public function createStep2(Request $request)
    {
        $register = $request->session()->get('register');

        return view('register.step2',compact('register'));
    }

    public function PostcreateStep2(Request $request)
    {
        $validatedData = $request->validate([
            'description' => 'required|unique:registers',
        ]);
        if(empty($request->session()->get('register'))){
            $register = new \App\Register();
            $register->fill($validatedData);
            $request->session()->put('register', $register);
        }else{
            $register = $request->session()->get('register');
            $register->fill($validatedData);
            $request->session()->put('register', $register);
        }
        return redirect('/register3');
    }
    
    public function createStep3(Request $request)
    {  
        $register = $request->session()->get('register');
        return view('register.step3',compact('register'));
    }

    public function PostcreateStep3(Request $request)
    {
        $register = $request->session()->get('register');

        if(!isset($register->productImg)) {
            $request->validate([
                'productimg' => 'required|image|mimes:jpeg,png,jpg,gif,svg|max:2048',
            ]);
            $fileName = "productImage-" . time() . '.' . request()->productimg->getClientOriginalExtension();
            $request->productimg->storeAs('productimg', $fileName);
            $register = $request->session()->get('register');
            $register->productImg = $fileName;
            $request->session()->put('register', $register);
        }
        return view('register.step4',compact('register'));
    }

    public function removeImage(Request $request)
    {
        $register = $request->session()->get('register');

        $register->productImg = null;

        return view('register.step3',compact('register'));
    }

    public function store(Request $request)
    {
        $register = $request->session()->get('register');

        $register->save();

        return redirect('/data');
    }
}

Step 5: Create View

In this step, we have to create total two blade file as listed bellow:

resources/views/register/step1.blade.php

resources/views/register/step2.blade.php

resources/views/register/step3.blade.php

resources/views/register/step4.blade.php

resources/views/register/index.blade.php

Step 6 : Making Files Public

As you can notice current files are uploaded to the storage directory which is not public by default. It’s the Laravel’s default settings to hide default file upload from user’s as a security perspective.

Now, what if you want to upload your files, so that it will be visible to public?

You need to change following things.

Change disk config : Open filesystems.php which is located under public directory. Change the default parameter from local to public. By doing this file will be stored in storage/app/public directory.

config/filesystems.php

'default' => env('FILESYSTEM_DRIVER', 'public'),

Symlink. Put a symlink from /public/storage to /storage/app/public folder, with one Artisan command:

php artisan storage:link

Now all are set to go. If you found this tutorial helpful and if you have any questions, Let me know in comments. You might also find other related tutorials useful.