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

In this post we will give you information about How to do form validation in laravel 5.6 using vue js and axios with example. Hear we will give you detail about How to do form validation in laravel 5.6 using vue js and axios with exampleAnd how to use it also give you demo for it if it is necessary.

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 AppHttpControllers;


use IlluminateHttpRequest;


classCategoryControllerextends Controller
{
   
    publicfunctioncreate()
    {
         return view('category-form');
    }


    publicfunctionstore(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>
    <linkhref="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>


<divclass="container">
    <divclass="row">
        <divclass="col-md-8 col-md-offset-2">
            <divclass="panel panel-primary">
                <divclass="panel-heading">Form validation in laravel 5.6 using vue js and axios with example</div>


                <divclass="panel-body"id="app">
                        <formmethod="POST" action="{{URL('create-category')}}"class="form-horizontal" @submit.prevent="onSubmit">
                         {{ csrf_field() }}

                            <div:class="['form-group', errors.name ? 'has-error' : '']">
                                <labelfor="name"class="col-sm-4 control-label">Name</label> 
                                <divclass="col-sm-6">
                                    <inputid="name"name="name"value=""autofocus="autofocus"class="form-control"type="text"v-model="form.name">
                                    <spanv-if="errors.name":class="['label label-danger']">@{{ errors.name[0] }}</span>
                                </div>
                            </div> 
                            <div:class="['form-group', errors.description ? 'has-error' : '']">
                                <labelfor="description"class="col-sm-4 control-label">Description</label> 
                                    <divclass="col-sm-6">
                                        <inputid="description"name="description"class="form-control"type="text"v-model="form.description">
                                        <spanv-if="errors.description":class="['label label-danger']">@{{ errors.description[0] }}</span>
                                    </div>
                                </div>
                                <center><inputtype="submit"value="Add Category"class="btn btn-primary"></center>
                                   
                                <spanv-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..

Label :

PHP

Laravel PHP Framework

MVC

Web Development

JavaScript

Vue.js

Hope this code and post will helped you for implement How to do form validation in laravel 5.6 using vue js and axios with example. if you need any help or any feedback give it in comment section or you have good idea about this post you can give it comment section. Your comment will help us for help you more and improve us. we will give you this type of more interesting post in featured also so, For more interesting post and code Keep reading our blogs

For More Info See :: laravel And github

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

Label :

Leave a Comment Cancel Reply