Dynamic Form Validation in VueJs with PHP Laravel 5.6
In this post we will give you information about Dynamic Form Validation in VueJs with PHP Laravel 5.6. Hear we will give you detail about Dynamic Form Validation in VueJs with PHP Laravel 5.6And how to use it also give you demo for it if it is necessary.
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 AppHttpControllers;
use IlluminateHttpRequest;
class VueJSController extends Controller
{
/**
* Show the application dashboard.
*
* @return IlluminateHttpResponse
*/
public function index()
{
return view('vuejs-form');
}
/**
* Show the application dashboard.
*
* @return IlluminateHttpResponse
*/
public function store(Request $request)
{
$request->validate([
'name' => 'required',
'comments' => 'required'
]);
return response()->json(['success'=>'Done!']);
}
}
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
<!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 >
<div >
<div >
<div >
<div >Simple Vuejs Form Validation with Laravel - ItSolutionStuff.com</div>
<div id="app">
<form method="POST" action="/vuejs/form" @submit.prevent="onSubmit" >
{{ csrf_field() }}
<div : >
<label for="name" >Name</label>
<div >
<input id="name" name="name" value="" autofocus="autofocus" type="text" v-model="form.name">
<span v-if="allerros.name" :>@{{ allerros.name[0] }}</span>
</div>
</div>
<div : >
<label for="comments" >Message</label>
<div >
<input id="comments" name="comments" type="comments" v-model="form.comments">
<span v-if="allerros.comments" :>@{{ allerros.comments[0] }}</span>
</div>
</div>
<span v-if="success" :>Record submitted successfully!</span>
<button type="submit" >
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…..
Hope this code and post will helped you for implement Dynamic Form Validation in VueJs with PHP Laravel 5.6. 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