Vuejs Form Validation using Laravel with PHP
In this Post We Will Explain About is Vuejs Form Validation using Laravel with PHP With Example and Demo.
Welcome on infinityknow.com – Examples ,The best For Learn web development Tutorials,Demo with Example! Hi Dear Friends here u can know to Laravel vuejs form validation
In this post we will show you Best way to implement Handling Laravel Validation Error Messages With Vue.js, hear for How to Form Validation In Vue 2 And Laravel – vform with Download .we will give you demo,Source Code and examples for implement Step By Step Good Luck!.
Step 1 : Create Route using Laravel
[php]
Route::get(‘vue/form’, ‘[email protected]’);
Route::post(‘vue/form’, ‘[email protected]’);
[/php]
Step 2 : Create Model with migration using CMD
[php]
php artisan make:model Comments –migration
[/php]
app/Comments.php using laravel folder path
[php]
<?php
namespace App;
use Illuminate\Database\Eloquent\Model;
class Comments extends Model
{
protected $fillable = [
'name',
'comments'
];
}
[/php]
Migrate to Database using CMD
[php]
class CreateMessagesTable extends Migration
{
public function up()
{
Schema::create(‘messages’, function (Blueprint $table) {
$table->increments(‘id’);
$table->string(‘name’)->nullable();
$table->text(‘comments’)->nullable();
$table->timestamps();
});
}
public function down()
{
Schema::dropIfExists(‘messages’);
}
}
[/php]
Run :
[php]
php artisan migrate
[/php]
Step 3 : Create Controller : using CMD
[php]
php artisan make:controller vformController –resource
[/php]
Laravel Path Save : app/Http/Controllers/vformController.php
[php]
all());
}
}
[/php]
Step 4 : Create blade file
[php]
@extends(‘layouts.app’)
@section(‘content’)
@endsection
[/php]
Step 5 : Handle Form Validation
[php]
const app = new Vue({
el: ‘#app’,
data: {
form: {
name : ”,
comments : ”,
},
dataerrors: [],
success : false,
},
methods : {
onSubmit() {
myform = new FormData();
myform.append(‘name’, this.form.name);
myform.append(‘comments’, this.form.comments);
axios.post(‘https://infinityknow.com/laravel54/public/vue/form’, myform).then( response => {
this.dataerrors = [];
this.form.name = ”;
this.form.comments = ”;
this.success = true;
console.log(response);
} ).catch((error) => {
this.dataerrors = error.response.data;
this.success = false;
console.log(this.dataerrors);
});
}
}
});
[/php]
I hope you have Got laravel vue js form validation step by step And how it works.I would Like to have FeadBack From My Blog(infinityknow.com) readers.Your Valuable FeadBack,Any Question,or any Comments abaout This Article(infinityknow.com) Are Most Always Welcome.