How to Make Form Validation in Laravel Inertia and Vue
1 year ago
admin
Laravel
In this lesson, we are going to see how to make form validation in Laravel Inertia js and Vue js, let's assume that we have a task application and we want to validate a form before storing a new task.
Create the controller
Inside the controller, before we store the new task we validate the data coming from the form.
<?php
namespace App\Http\Controllers;
use App\Models\Task;
use Illuminate\Http\Request;
class TaskController extends Controller
{
/**
* Store a newly created resource in storage.
*/
public function store(Request $request)
{
//
$this->validate($request, [
'title' => 'required',
'body' => 'required',
'category_id' => 'required',
]);
Task::create([
'title' => $request->title,
'body' => $request->body,
'category_id' => $request->category_id,
]);
return redirect()->route('home')->with([
'message' => 'Task added successfully',
'class' => 'alert alert-success'
]);
}
}
Display the form validation errors
To display the form validation errors in your component you can use the form helper provided by inertia js.
<template>
<div class="container">
<div className="row my-5">
<div className="col-md-6 mx-auto">
<div className="card">
<div className="card-header bg-white">
<h5 className="text-center mt-2">
Create new task
</h5>
</div>
<div className="card-body">
<form @submit.prevent="addNewTask" className="mt-5">
<div className="mb-3">
<label htmlFor="title" className="form-label">Title*</label>
<input
type="text"
v-model="form.title"
className="form-control"
placeholder="Title*">
<div v-if="form.errors.title" class="text-white bg-danger p-2 rounded my-2">{{ form.errors.title }}</div>
</div>
<div className="mb-3">
<label htmlFor="body" className="form-label">Description*</label>
<textarea
className="form-control"
v-model="form.body"
placeholder="Body*"
rows="3"></textarea>
<div v-if="form.errors.body" class="text-white bg-danger p-2 rounded my-2">{{ form.errors.body }}</div>
</div>
<div className="mb-3">
<label htmlFor="category_id" className="form-label">Category*</label>
<select v-model="form.category_id" class="form-control">
<option disabled selected value="">Choose a category</option>
<option v-for="category in categories" :key="category.id"
:value="category.id">{{ category.name }}</option>
</select>
<div v-if="form.errors.category_id" class="text-white bg-danger p-2 rounded my-2">{{ form.errors.category_id }}</div>
</div>
<div className="mb-3">
<button
type="submit"
className="btn btn-primary">
Create
</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</template>
<script setup>
import { useForm } from "@inertiajs/vue3";
const form = useForm({
title: '',
body: '',
category_id: ''
});
const props = defineProps({
categories: {
type: Array,
required: true
}
});
const addNewTask = () => {
form.post('/tasks');
}
</script>
<style>
</style>