Level 37
I use always the Form helper. (useForm instead of reactive)
Dec 7, 2022
1
Level 1
Laravel Inertia not show validation error message and return back page (production mode)
My Laravel Inertia project is not showing error message, but return back the page.
For example: If i try to login, but not fill username and password, its will show error message that username and password is required. Then if i successfully login, and try to create 1 data (for example: city data), so after click save button, its will be back to login page.
I dont know why this happend in production mode, shared hosting, php 8.0.
My create.vue file:
<template>
<Head>
<title>Tambah Desa Baru - {{ title() }}</title>
</Head>
<main class="c-main">
<div class="container-fluid">
<div class="fade-in">
<div class="row">
<div class="col-md-12">
<div class="card border-0 rounded-3 shadow border-top-purple">
<div class="card-header">
<span class="font-weight-bold"><i class="fa fa-folder"></i> Tambah Desa Baru</span>
</div>
<div class="card-body">
<form @submit.prevent="submit">
<div class="mb-3">
<label class="fw-bold">Kecamatan</label>
<Multiselect v-model="form.kecamatanId" :options="kecamatans" valueProp="id" label="name"
trackBy="name" :searchable="true" placeholder="Pilih nama kecamatan:">
<template v-slot:singlelabel="{ value }">
<div class="multiselect-single-label">
{{ value.name }}
</div>
</template>
<template v-slot:option="{ option }">
{{ option.name }}
</template>
</Multiselect>
</div>
<div v-if="errors.kecamatanId" class="alert alert-danger">
{{ errors.kecamatanId }}
</div>
<div class="mb-3">
<label class="fw-bold">Nama Desa</label>
<input class="form-control" v-model="form.name" :class="{ 'is-invalid': errors.name }" type="text"
placeholder="Nama desa">
</div>
<div v-if="errors.name" class="alert alert-danger">
{{ errors.name }}
</div>
<div class="row">
<div class="col-12">
<ButtonInCreateVue url="desas"></ButtonInCreateVue>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
</template>
<script>
import LayoutApp from '../../../Layouts/App.vue';
import { Head, Link, usePage } from '@inertiajs/inertia-vue3';
import { reactive } from 'vue';
import { Inertia } from '@inertiajs/inertia';
import ButtonInCreateVue from '../../../Components/ButtonInCreate.vue'
import { successAlert } from '../../../Composables/useAlert';
import Multiselect from '@vueform/multiselect'
export default {
layout: LayoutApp,
components: {
Head,
Link,
ButtonInCreateVue,
Multiselect
},
props: {
errors: Object,
kecamatans: Array,
},
setup(props) {
const form = reactive({
name: '',
kecamatanId: '',
});
const submit = () => {
Inertia.post('/apps/desas', {
name: form.name,
kecamatanId: form.kecamatanId,
_token: usePage().props.value.auth.csrf
}, {
onSuccess: () => {
successAlert('Desa', 'ditambah')
},
});
}
return {
form,
submit,
}
}
}
</script>
<style src="@vueform/multiselect/themes/default.css">
</style>
My controller store:
public function store(Request $request)
{
$this->validate($request, [
'kecamatanId' => 'required',
'name' => 'required'
]);
Desa::create([
'kecamatanId' => $request->kecamatanId,
'name' => $request->name
]);
return redirect()->route('apps.desas.index');
}
My HandleInertiaRequest:
<?php
namespace App\Http\Middleware;
use Illuminate\Http\Request;
use Inertia\Middleware;
class HandleInertiaRequests extends Middleware
{
/**
* The root template that's loaded on the first page visit.
*
* @see https://inertiajs.com/server-side-setup#root-template
* @var string
*/
protected $rootView = 'app';
/**
* Determines the current asset version.
*
* @see https://inertiajs.com/asset-versioning
* @param \Illuminate\Http\Request $request
* @return string|null
*/
public function version(Request $request): ?string
{
return parent::version($request);
}
/**
* Defines the props that are shared by default.
*
* @see https://inertiajs.com/shared-data
* @param \Illuminate\Http\Request $request
* @return array
*/
public function share(Request $request): array
{
return array_merge(parent::share($request), [
//session
'session' => [
'status' => fn () => $request->session()->get('status'),
'success' => fn () => $request->session()->get('success'),
'error' => fn () => $request->session()->get('error'),
],
//user authenticated
'auth' => [
'user' => $request->user() ? $request->user() : null,
'permissions' => $request->user() ? $request->user()->getPermissionArray() : [],
'csrf' => $request->session()->token()
],
//route
'route' => function () use ($request) {
return [
'params' => $request->route()->parameters(),
'query' => $request->all(),
];
},
]);
}
}
And create network return status code 302 found
Please or to participate in this conversation.