How to do form validation in laravel 5.6 using vue js and axios with example

Posted 5 years ago By Ajay Gupta 55519

In this PHP Laravel 5.6 Tutorial, I am going to tell you how to handle Laravel validation error messages with Vue.js.

As we know, Vue.js is going more popular and officially supported by Laravel.

While building a web application, the most important thing to be kept in mind is the validation of user input.

You can implement form validation by yourself or you can use any plugins to implement form validation.

For this example, I have two routes and one controller to handle request response mechanism.

Step 1: Add Routes

This is first step where we will add two routes :

routes/web.php

Route::get('create-category', 'CategoryController@create');
Route::post('create-category', 'CategoryController@store');

Step 2: Create Category Controller

Now I need to create a new controller "CategoryController.php" and define two methods for displaying the form and handle the request submitted by form.

app/Http/Controllers/CategoryController.php

<?php


namespace App\Http\Controllers;


use Illuminate\Http\Request;


class CategoryController extends Controller
{
   
    public function create()
    {
         return view('category-form');
    }


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

        return response()->json(['status'=>'true']);
    }
}

Step 3: Create Blade File

Now I will add a blade view file to display form "category-form.blade.php" :

resources/views/category-form.blade.php

<!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-md-8 col-md-offset-2">
            <div class="panel panel-primary">
                <div class="panel-heading">Form validation in laravel 5.6 using vue js and axios with example</div>


                <div class="panel-body" id="app">
                        <form method="POST" action="{{URL('create-category')}}" class="form-horizontal" @submit.prevent="onSubmit">
                         {{ csrf_field() }}

                            <div :class="['form-group', errors.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="errors.name" :class="['label label-danger']">@{{ errors.name[0] }}</span>
                                </div>
                            </div> 
                            <div :class="['form-group', errors.description ? 'has-error' : '']" >
                                <label for="description" class="col-sm-4 control-label">Description</label> 
                                    <div class="col-sm-6">
                                        <input id="description" name="description"  class="form-control" type="text" v-model="form.description">
                                        <span v-if="errors.description" :class="['label label-danger']">@{{ errors.description[0] }}</span>
                                    </div>
                                </div>
                                <center><input type="submit" value="Add Category" class="btn btn-primary"></center>
                                   
                                <span v-if="success" :class="['label label-success']">Successfully added!</span>

                        </form>
                </div>
            </div>
        </div>
    </div>
</div>


<script type="text/javascript">
    const app = new Vue({
        el: '#app',
        data: {
            form: {
                name : '',
                description : '',
            },
            errors: [],
            success : false,    
        },
        methods : {
            onSubmit: function(e) {


                formdata = new FormData();
                formdata.append('name', this.form.name);
                formdata.append('description', this.form.description);
                console.log(e.target.action);


                axios.post(e.target.action, formdata).then( response => {
                    this.errors = [];
                    this.form.name = '';
                    this.form.description = '';
                    this.success = true;
                } ).catch((error) => {
                         this.errors = error.response.data.errors;
                         this.success = false;
                    });
            }
        }
    });
</script>
</body>
</html>

Try this..

How to do form validation in laravel 5.6 using vue js and axios with example

How to do form validation in laravel 5.6 using vue js and axios with example

Tags :

Related Posts

Building an Autocomplete Component with Vue.js and PHP Laravel 5.6