Surfe.be - passive income

Dynamic Vue js Form Validation in Laravel

Form validation in Laravel with Vue js

Form validation is natively supported by the browser, but sometimes different browsers will handle things in a manner which makes relying on it a bit tricky. Even when validation is supported perfectly, there may be times when custom validations are needed and a more manual, Vue-based solution may be more appropriate. Today market, vue js become more popular. So today i want to share with you how to add dynamic input form validation using laravel along with vue js. Here we will use form validation with axios api call and display errors using vuejs.in this example, we will create two routes in laravel application with one controller. then in blade file we will import bootstrap, vuejs and axios js files. then we will add laravel validation in controller file. Then we write vue js code for dynamic form validation.So it's very simple example and you can make it quick use. we can also use vue js code in our other application too. So let's follow bellow step and make it nice example.

dynamic-form-validation-with-vue-js

So let’s start our work. For doing this we have to follow some steps. So follow those steps one after another

Route Setup :

Route::get('vuejs/form', 'VueController@index');
Route::post('vuejs/form', 'VueController@store');

Now we have to create our controller

Create Controller : 

php artisan make:controller VueController 

after doing it you have to go to this directory app/Http/Controllers/VueController.php and update this controller with following code 

<?php

namespace App\Http\Controllers;
use Illuminate\Http\Request;

class VueController extends Controller
{
   
    public function index()
    {
        return view('vuejs-form');
    }

    public function store(Request $request)
    {
        $request->validate([
            'name' => 'required',
            'comments' => 'required'
        ]);


        return response()->json(['success'=>'Done!']);
    }
}

Create Blade Template :  Now you have to go your resources/views/vuejs-form.blade.php 

<!DOCTYPE html>
<html>
<head>
    <title> Dynamic Form Validation </title>
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" >
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.min.js"></script>
</head>
<body>


<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 Validation with Laravel - Techmahedy.com</div>


                <div class="panel-body" id="app">
                        <form method="POST" action="/vuejs/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>


<script type="text/javascript">
    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);
                console.log(this.form.name);


                axios.post('/vuejs/form', dataform).then( response => {
                    console.log(response);
                    this.allerros = [];
                    this.form.name = '';
                    this.form.comments = '';
                    this.success = true;
                } ).catch((error) => {
                         this.allerros = error.response.data.errors;
                         this.success = false;
                    });
            }
        }
    });
</script>
</body>
</html>

That’s it . Hope you will get it . Hope this tutorial will help you. If you like this tutorial please leave a comment and don’t forget to share.

Leave a comments

LET'S SOCIALITE

Recent Tweets