Laravel Vue Js Form Submit With Validation Using V-form Package

Hello Artisan

In this tutorial i will guide you how to validate form data in laravel 7 with vue js using v-from. In this tutorial we will validate data before submit to the derver. If the requested data is invalid, then we will show a instant error message without page refresh. And this thing we will do using v-form packages.

v-form is a simple way to handle Laravel back-end validation in Vue. Inspired from Laravel Spark. If you don't know how to use v-form then no problem. I will guide you from step by step. 

In this tutorial we will create a register system in laravel 7 with vue js. We will submit form data without page refresh and will be showed error message if we get non validate data after submit html form.

So let's start our laravel 7 vue js form validation example. 

 

Step 1: Install Laravel 7

I will show you step by step from scratch. So we have to download laravel first. Run below command.

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

 

Step 2:  Create Migration

We need user table. So paste this below code to users table


use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

class CreateUsersTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('users', function (Blueprint $table) {
            $table->id();
            $table->string('username')->unique();
            $table->string('email',191)->unique();
            $table->string('password');
            $table->rememberToken();
            $table->timestamps();
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('users');
    }
}

 

Now run php artisan migrate to migrate our table.

php artisan migrate

 

We need to setup our user model. so paste this below code

namespace App;

use Illuminate\Contracts\Auth\MustVerifyEmail;
use Illuminate\Foundation\Auth\User as Authenticatable;
use Illuminate\Notifications\Notifiable;

class User extends Authenticatable
{
    use Notifiable;
   
    protected $guarded = [];

    public function setPasswordAttribute($value)
    {
        $this->attributes['password'] = \Hash::make($value);
    }
}

 

Step 3:  Create Route

We need route to create our laravel vue js form validation example. So paste this below code.

routes/web.php

Route::get('/register','AuthController@show_signup_form')->name('register');
Route::post('/register','AuthController@process_signup');  

 

Step 4:  Create Controller

Now we need auth controller to create those two avobe method. so create auth contoller and paste this below code.

app/Https/Controller/AuthController.php

namespace App\Http\Controllers;

use App\User;
use Carbon\Carbon;
use Illuminate\Http\Request;
use App\Http\Controllers\Controller;
use Illuminate\Support\Facades\View;

class AuthController extends Controller
{   
    public function __construct()
    {
        $this->middleware('guest')->except('logout');
    }

    public function show_signup_form()
    {
        if (View::exists('auth.register')) {
            
            return view('auth.register');

        }
    }

    public function process_signup(Request $request)
    {
        $this->validate($request, [ 
            'username' => 'required',
            'email' => 'required',
            'password' => 'required|confirmed|min:6',
        ]);

        $user = new User;
        $user->username = $request->username;
        $user->email = strtolower($request->email);
        $user->password = $request->password;
        $user->save();

        return response()->json(
            [
                'success' => true,
                'message' => 'Registration is completed'
            ]
        );

    }

}

 

Step 5:   Install Vue

If you want to install vue in your laravel 7 project then install following laravel ui composer package to get it. So run below command

composer require laravel/ui

 

Install Vue

php artisan ui vue

 

Then run 

npm install

 

Install v-form via npm

npm i axios vform

 

Now our setup is completed. Now we just need to change our app.js file and our component file.

resources/assets/js/components/RegisterComponent.vue

 

We are in the last part. Just we need to add some code to app.js file to get support v-form. So add it.

resources/js/app.js

require('./bootstrap');

window.Vue = require('vue');

//Import v-from
import { Form, HasError, AlertError } from 'vform'
window.Form = Form;
Vue.component(HasError.name, HasError)
Vue.component(AlertError.name, AlertError)

//component
Vue.component('register-component', require('./components/RegisterComponent.vue').default);

const app = new Vue({
    el: '#app',
});

 

Step 6:   Create blade file

Now time to setup our blade file. open resources/layouts/app.php and paste this following code.

resources/views/layouts/app.blade.php

 

Now open resources/views/post/create.blade.php file and paste this code. 

resources/views/auth/register.blade.php

 

Now all are set to go. Now just we have to compile our all javascript file. so run below command.

npm run dev 

 

Read also: Like Dislike Features in Laravel 7 using Vue Js

 

Now just visit the below url to see the register form. Then you will see the output of this following laravel vue js form validation tutorial with v-form. 

 

URL
http://localhost:8000/register

 

After completing this In tutorial, now we can use v-form in vue js project. We can validate html form data in laravel with vue js. We can store data into database with vue js in laravel using v-form. Hope you will like it.