Dynamic Form Validation in VueJs with PHP Laravel 5.6

By Hardik Savani May 14, 2024 Category : PHP Laravel Bootstrap Vue.JS

today market, vue js become more popular. so today i want to share with you how to add dynamic input form validation using php laravel in vue js app with demo. 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.

Step 1: Add New Routes

In first step we need to add two routes for this example, so you need to add following route on bellow file.

routes/web.php

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

Step 2: Create New VueJSController

we need to add new controller and method for manage form and validation, first put bellow code on your VueJSController.php file.

app/Http/Controllers/VueJSController.php

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class VueJSController extends Controller
{
    /**
     * Show the application dashboard.
     *
     * @return \Illuminate\Http\Response
     */
    public function index()
    {
        return view('vuejs-form');
    }

    /**
     * Show the application dashboard.
     *
     * @return \Illuminate\Http\Response
     */
    public function store(Request $request)
    {
        $request->validate([
            'name' => 'required',
            'comments' => 'required'
        ]);

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

Read Also: Laravel Client Side Validation using Parsley.js Example

Step 3: Create Blade File

Ok, now at last we need to add blade view so first create new file vuejs-form.blade.php file and put bellow code:

resources/views/vuejs-form.blade.php

Read Also: Vue JS Scroll to Element in Div using Vue-scrollto Example
<!DOCTYPE html>
<html>
<head>
    <title></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 - ItSolutionStuff.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>

Now you are ready to run example.

You can also see demo from below links.

I hope it can help you.....

Tags :
Previous

Codeigniter Confirm Box Before Delete Record Example
Next

Laravel 5.6 - Dynamic Ajax Autocomplete using Vue.js

We are Recommending you

Popular Posts

Categories

Latest Posts

Shares