Laravel vuejs form validation – Input Validation with Laravel

Laravel vuejs form validation – Input Validation with Laravel

In this Post We Will Explain About is Laravel vuejs form validation – Input Validation with Laravel With Example and Demo.

Laravel Simple Vuejs Form HTML vuejs Validation. Here we will simple explain we, how to all the validation handle laravel validation allerros with vue js. In this Post we are going to see The simple form like validation with simple vue js. Here I have a simple table called like as a message comments which has two form input fields name and Message. We are going to simple store the user all the Message with validation allerros.

Welcome on infinityknow.com – Examples ,The best For Learn web development Tutorials,Demo with Example! Hi Dear Friends here u can know to Form Validation In Vue 2 And Laravel – vform vuejs

In this post we will show you Best way to implement laravel vue js form validation, hear for How to Image upload and validation using Laravel and VueJs with Download .we will give you demo,Source Code and examples for implement Step By Step Good Luck!.

Phase 1 : Create Route

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

Phase 2 : Create Model with migration

php artisan make:model Message --migration

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class Message extends Model
{
    protected $fillable = [
    'name',
    'comments'
    ];
}

Migrate to Database :

class CreateMessagesTable extends Migration
{
    public function up()
    {
        Schema::create('comments', function (Blueprint $table) {
            $table->increments('id');
            $table->string('name')->nullable();
            $table->text('comments')->nullable();
            $table->timestamps();
        });
    }
    public function down()
    {
        Schema::dropIfExists('comments');
    }
}

Run : php artisan migrate

Phase 3 : Create Controller :

php artisan make:controller liveVueController --resource

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Http\Requests\MessageRequest;
use App\Message;

class liveVueController extends Controller
{
    public function index()
    {
        return view('vue.create');
    }

    public function store(MessageRequest $request)
    {
        return Message::create($request->all());
    }

}

Phase 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">Simple Vuejs Form</div>

                <div class="panel-body" id="app">
                        <form method="POST" action="https://infinityknow.com/laravel54/public/vue/form" class="form-horizontal" @submit.prevent="onSubmit" >
                        {{ csrf_field() }}
                            <div :class="['form-group', allerros.name ? 'has-error' : '']" >
                                <label for="name" class="col-sm-4 control-label">Name</label> 
                                <div class="col-sm-6">
                                    <input id="name" name="name" value=""  autofocus="autofocus" class="form-control" type="text" v-model="form.name">
                                    <span v-if="allerros.name" :class="['label label-danger']">@{{ allerros.name[0] }}</span>
                                </div>
                            </div> 
                            <div :class="['form-group', allerros.comments ? 'has-error' : '']" >
                                <label for="comments" class="col-sm-4 control-label">Message</label> 
                                    <div class="col-sm-6">
                                        <input id="comments" name="comments"  class="form-control" type="comments" v-model="form.comments">
                                        <span v-if="allerros.comments" :class="['label label-danger']">@{{ allerros.comments[0] }}</span>
                                    </div>
                                </div>
                                <span v-if="success" :class="['label label-success']">Record submitted successfully!</span>
                                <button type="submit" class="btn btn-primary">
                                    Send
                                </button>
                        </form>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

Phase 5 : Handle Form Validation

const app = new Vue({
    el: '#app',

    data: {
    	form: {
    		name : '',
    		comments : '',
    	},
    	allerros: [],
    	success : false,    
    },
    methods : {
    	onSubmit() {

    		dataform = new FormData();
    		dataform.append('name', this.form.name);
    		dataform.append('comments', this.form.comments);

    		axios.post('https://infinityknow.com/laravel54/public/vue/form', dataform).then( response => {
    		    this.allerros = [];
    		    this.form.name = '';
    		    this.form.comments = '';
    		    this.success = true;
                            console.log(response);
	    	} ).catch((error) => {
	                 this.allerros = error.response.data;
	                 this.success = false;
	                 console.log(this.allerros);
	            });
    	}
    }
});

Example

I hope you have Got Vee-Validate Simple Vue.js Input Validation with Laravel 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.