Hello Artisan
In this brand new tutorial i will explain from scratch that vform laravel vue package how to use. That mean how we can use v-form package and and how to setup it with vue js in Laravel application. In this laravel vue js form validation tutorial i will use v-form package to validate form before submit.
Do you know that 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 that how to validate form in laravel and vue js using v-form package.
In this tutorial i will simply create a register system in laravel 7 with vue js. I will submit form data without page refresh and will be showed error message if we get non validate data after submit this form. We will show error message form v-form package.
So after all from this following tutorial you will learn how to use together laravel vue js v-form package and Laravel Vue axios validation example we will also see. So let's see how we print vue get error message laravel application. So let's start laravel vue js form validation.
Step 1: Install Laravel
I will show you step by step from scratch that how to submit form using vue js laravel. So you have to download laravel first.
composer create-project --prefer-dist laravel/laravel blog
Recommended : Laravel 7.x Client Side Form Validation with jQuery Example
Step 2: Create Migration
We have to create user table. So paste this below code to users table and create migrations
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. Here we do accessor to create hash of user password.
App\User.php
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: Add Route
If you want to create laravel vue js form validation, then paste this below code to your route file.
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 to complete laravel 7 vue js form validation example tutorial. Now you have to 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 would like 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
Read also : Dynamic Form Validation in Laravel 7 Using Vue Js
Now our setup is completed to do laravel form validation using vue js. Now we just need to update our app.js file and our component file.
resources/assets/js/components/RegisterComponent.vue
We are in the last part to get laravel vue js form validation example using v-form package. Just we need to update app.js file to get support v-form. So add it in this file.
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',
});
Read also : Multi Step Form Submit in Laravel 7.x with Validation
Step 6: Create blade file
Now time to setup our blade file and we are almost done. open resources/layouts/app.php and paste this following code.
resources/views/layouts/app.blade.php
Now go to 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: Laravel 7.x Ajax Form Submit With jQuery Validation
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.
After completing this In tutorial, now we know how to use v-form in vue js and laravel project. We can validate html form data in laravel with vue js using v-form package now. We can store data into database with vue js in laravel using v-form now after finishing this tutorial. Hope it can help you.
#laravel #laravel-7 #laravel-7x #v-form #vue-js #form-validation #client-side-validation #tutorial #error-message #packages