Vuejs Form Validation using Laravel with PHP

Rate this post

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!.

READ :  PHP Toggle switch Update DB field using jQuery Ajax

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’)

READ :  Angular Date filtering and formatting JSON Data

@section(‘content’)

Vuejs Form
{{ csrf_field() }}

@{{ dataerrors.name[0] }}

@{{ dataerrors.comments[0] }}

Record submitted successfully!

@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]

Example

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.

Leave a Reply

Your email address will not be published.