Vuejs Form Validation using Laravel with PHP

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

Route::get('vue/form', '[email protected]');
Route::post('vue/form', '[email protected]');

Step 2 : Create Model with migration using CMD

php artisan make:model Comments --migration

app/Comments.php using laravel folder path

<?php
 
namespace App;
 
use Illuminate\Database\Eloquent\Model;
 
class Comments extends Model
{
    protected $fillable = [
    'name',
    'comments'
    ];
}

Migrate to Database using CMD

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

Run :

php artisan migrate

Step 3 : Create Controller : using CMD

php artisan make:controller vformController --resource

Laravel Path Save : app/Http/Controllers/vformController.php

all());
    }
 
}

Step 4 : Create blade file

@extends('layouts.app')
 
@section('content')
<div class="container">
    <div class="row">
        <div class="col-sm-8 col-sm-offset-2">
            <div class="panel panel-default">
                <div class="panel-heading">Vuejs Form</div>
 
                <div class="panel-body" id="app">
                        <form method="POST" action="https://infinityknow.com/laravel54/public/vue/form" class="form-horizontal">
                        {{ csrf_field() }}
                            <div>
                                <label for="name" class="col-sm-4 control-label">Name</label> 
                                <div class="col-sm-6">
                                    
                                    <span>@{{ dataerrors.name[0] }}</span>
                                </div>
                            </div> 
                            <div>
                                <label for="comments" class="col-sm-4 control-label">Comments</label> 
                                    <div class="col-sm-6">
                                        
                                        <span>@{{ dataerrors.comments[0] }}</span>
                                    </div>
                                </div>
                                <span>Record submitted successfully!</span>
                                <button type="submit" class="btn btn-primary">
                                    Send
                                </button>
                        </form>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

Step 5 : Handle Form Validation

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

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.