Laravel 10 Vue 3 js Form Submit with Validation Example Tutorial

Laravel 10 Vue 3 js Form Submit with Validation Example Tutorial

If you are working on a Laravel 10 Vue.js application and need to create a registration or signup form with validation, this tutorial is designed to help you.

The tutorial will guide you through the process of creating a form, submitting it without page refresh, and displaying error messages for invalid data in laravel 10 vue 3 js.

Laravel 10 Vue 3 js Form Submit with Validation Example Tutorial

Steps to create and submit a registration form with validation in a Laravel 10 Vue 3 js application. And also, You’ll be able to handle form submissions without page refreshes, validate submitted data on the server-side, and display error messages or success messages to the user as needed:

  • Step 1: Setup Laravel 10 Application
  • Step 2: Setup Database with Laravel App
  • Step 3: Add Fields in table using Migration File
  • Step 4: Setup and Configure Vue js and v-form
  • Step 5: Define Routes
  • Step 6: Create Controller to Handling form submission
  • Step 7: Create Registration Form Component
  • Step 8: Setup Components with Blade View
  • Step 9: Run Development Server

Step 1: Setup Laravel 10 Application

First of all, Open terminal or command prompt.

Then execute the following command into it to download or install Laravel 10 new setup in your server:

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

Step 2: Setup Database with Laravel App

Once you have installed Laravel 10 apps. Now, you need to configure the database with Laravel app.

So, visit to Laravel app root directory and open the .env file. Then add the database details like followings:

 DB_CONNECTION=mysql 
 DB_HOST=127.0.0.1 
 DB_PORT=3306 
 DB_DATABASE=here your database name here
 DB_USERNAME=here database username here
 DB_PASSWORD=here database password here

Step 3: Add Fields in table using Migration File

In this step, open create_users_table.php migration file from database>migrations and replace up() function with the following code:

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');
    }
}

Next, migrate the table using the below command:

php artisan migrate

Then you need to set up our user model. So, add the following code into your user.php model, like following:

App\Models\User.php

namespace App/Models;

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 4: Setup and Configure Vue js and v-form

Now, execute the following commands on the terminal or command prompt to install Vue dependencies and v-form into your laravel vue js apps:

php artisan preset vue

Install all Vue dependencies:

npm install

Install v-form via npm

npm i axios vform

Step 5: Define Routes

Next step, go to routes folder and open web.php file and add the following routes into your file:

routes/web.php

use App\Http\Controllers\AuthController;

Route::get('register', [AuthController::class, 'show_signup_form']->name('register');
Route::post('register', [AuthController::class, 'process_signup']);

Step 6: Create Controller to Handling form submission

Now, open your command prompt or terminal. And execute the following command to create a controller by an artisan:

php artisan make:controller AuthController

After that, go to app\Http\Controllers and open AuthController.php file. Then update the following code into your AuthController.php file:

<?php
namespace App\Http\Controllers;

use App\Models\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 7: Create Registration Form Component

Next step, go to resources/assets/js/components folder and create a filed called FileUpload.vue.

And update the following code into your RegisterComponent.vue components file:

<template>
    <div class="container">
    <div class="post">
    <div class="postinfotop">
       <h2>Create New Account</h2>
        <p id="text" style="color:green; margin-left:100px;"></p>
    </div>
    <form action="#" class="form newtopic" @submit.prevent="register">
       
        <div class="accsection">
            <div class="topwrap">
                <div class="userinfo pull-left">
                </div>
                <div class="posttext pull-left">

                    <div>
                        <input v-model="form.username" type="text" placeholder="Username" class="form-control" :class="{ 'is-invalid': form.errors.has('username') }" name="username">
                        <has-error :form="form" field="username"></has-error>
                    </div>
                    <div>
                       <input v-model="form.email" type="text" placeholder="Email" class="form-control" :class="{ 'is-invalid': form.errors.has('email') }" name="email">
                        <has-error :form="form" field="email"></has-error>
                    </div>
                    <div class="row">
                        <div class="col-lg-6 col-md-6">
                             <input v-model="form.password" type="text" placeholder="password" class="form-control" :class="{ 'is-invalid': form.errors.has('password') }" name="password">
                             <has-error :form="form" field="password"></has-error>
                        </div>
                        <div class="col-lg-6 col-md-6">
                            <input v-model="form.password_confirmation" type="text" placeholder="Confirm password" class="form-control" :class="{ 'is-invalid': form.errors.has('password_confirmation') }" name="password_confirmation">
                           <has-error :form="form" field="password_confirmation"></has-error>
                        </div>
                    </div>

                </div>
                <div class="clearfix"></div>
            </div>  
        </div>
       <button type="submit" class="btn btn-primary">Sign Up</button>
    </form>
    </div>
</div>
</template>

<script>
    export default {

        data () {
            return {
            form: new Form({
                username: '',
                email: '',
                password: '',
                password_confirmation: '',
              })
            }
        },

        methods: {

            register () {
                this.form.post('/register')
                    .then(( response ) => { 

                        var attr = document.getElementById("text");
                        attr.innerHTML = response.data.message;  
                        
                        this.form.reset();

                    })
            },
        }       
    }
</script> 

Now open resources/assets/js/app.js and include the RegisterComponent.vue component like this: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 8: Setup Components with Blade View

In this step, you will create a blade view file to define Vue’s app. Go to resources/views folder and make a file named app.blade.php. Then update the following code into app.blade.php as follow:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <title>{{ config('app.name', 'Laravel') }}</title>
    <link href="{{ mix('css/app.css') }}" rel="stylesheet">
    <title>Document</title>
</head>
<body>
    
    <div id="app">

    <div class="py-4">
        @yield('content')
    </div>
    
    </div>
    <script src="{{ mix('js/app.js') }}" defer></script>
</body>
</html>   

Now go to resources/views/auth/register.blade.php file and paste this code. 

resources/views/auth/register.blade.php

@extends('layouts.app')

@section('content')

    <register-component></register-component>
           
@endsection 

Step 9: Run Development Server

Run the following command to start development server:

npm run dev
or 
npm run watch

Conclusion

Laravel 10 vue js form submit with v-form package example. In this tutorial you have learned simply how to create a register system in Laravel 10 with vue js.

Recommended Laravel Posts

Recommended:-Laravel Try Catch

AuthorAdmin

My name is Devendra Dode. I am a full-stack developer, entrepreneur, and owner of Tutsmake.com. I like writing tutorials and tips that can help other developers. I share tutorials of PHP, Python, Javascript, JQuery, Laravel, Livewire, Codeigniter, Node JS, Express JS, Vue JS, Angular JS, React Js, MySQL, MongoDB, REST APIs, Windows, Xampp, Linux, Ubuntu, Amazon AWS, Composer, SEO, WordPress, SSL and Bootstrap from a starting stage. As well as demo example.

Leave a Reply

Your email address will not be published. Required fields are marked *