inertiajs / inertia-laravel

The Laravel adapter for Inertia.js.
https://inertiajs.com
MIT License
2.01k stars 224 forks source link

Cant get validation working on laravel-inertia-vue #565

Closed bbauti closed 8 months ago

bbauti commented 8 months ago

I'm trying to submit a form with the inertia form helper, so far I've always done it with axios but I want to learn how to use the helper. The problem is that, when I send the post request, the controller does not validate. If I submit the form, the controller creates the new category, if I send with an empty input, it doesn't create it, but if I send with a character, or a number, or things that a should trigger the validation, it also creates it. What could be the problem?

Edit: now it doesnt create the category even if its valid

I started the proyect with Jetstream

I have this code:

CategoriesController.php

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

use App\Models\Category;
use Inertia\Inertia;

class CategoriesController extends Controller
{
    public function show()
    {
        return Inertia::render('App/NewCategory', [
            'categories' => Category::all()->map(function ($category) {
                return [
                    'id' => $category->id,
                    'name' => $category->name,
                ];
            }),
        ]);
    }
    public function createCategory(Request $request)
    {
        $request->validate([
            'name' => 'required|integer|max:255|min:5',
        ]);

        Category::create([
            'name' => $request->name,
        ]);
        return redirect()->route('new-category')->with('message', 'Category Created Successfully');
    }
}

NewCategory.vue

<script setup>
import AppLayout from '@/Layouts/AppLayout.vue';

import { useForm } from '@inertiajs/vue3'
import { toast } from "vue-sonner";

defineProps({ categories: Object, errors: Object });

const form = useForm({
    name: null,
});

const createCategory = () => {
    form.post(route('categories.create'));
};
</script>

<template>
    <AppLayout title="Dashboard">
        <template #header>
            <h2 class="font-semibold text-accent text-xl leading-tight">
                Nueva categorias
            </h2>
        </template>

        <div class="py-12">
            <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
                <form class="max-w-[500px]" @submit.prevent="createCategory">
                    <div class="form-control w-full">
                        <label class="label">
                            <span class="label-text text-lg">Nombre</span>
                        </label>
                        <input type="text" name="name" placeholder="Nombre" class="input input-bordered w-full" v-model="form.name"/>
                        <div class="label">
                            <span class="label-text-alt text-error" v-if="form.errors.name">{{ form.errors.name }}</span>
                        </div>
                    </div>
                    <!-- <div class="form-control w-full">
                        <label class="label">
                            <span class="label-text text-lg">Categoria padre</span>
                        </label>
                        <select class="select select-bordered w-full max-w-xs">
                            <option disabled selected>Categoria</option>
                            <option v-for="category in categories" :value="category.id">{{ category.name }}</option>
                        </select>
                    </div> -->
                    <button :disabled="form.processing" :class="{ 'opacity-25': form.processing }" class="btn btn-accent mt-5">Enviar</button>
                </form>
            </div>
        </div>
    </AppLayout>
</template>

routes/api.php

<?php

use Illuminate\Http\Request;
use Illuminate\Support\Facades\Route;
use Illuminate\Foundation\Http\Middleware\HandlePrecognitiveRequests;

use App\Http\Controllers\CategoriesController;

/*
|--------------------------------------------------------------------------
| API Routes
|--------------------------------------------------------------------------
|
| Here is where you can register API routes for your application. These
| routes are loaded by the RouteServiceProvider and all of them will
| be assigned to the "api" middleware group. Make something great!
|
*/

Route::middleware('auth:sanctum')->get('/user', function (Request $request) {
    return $request->user();
});

Route::post('/categories/create-category', [CategoriesController::class, 'createCategory'])->name('categories.create');
RobertBoes commented 8 months ago

You've defined the route in routes/api.php, Inertia isn't an API library like Axios, it's a router. The API would most likely be stateless and doesn't have the Inertia middleware. You should define your route as a web route in routes/web.php

bbauti commented 8 months ago

Oh. I thought that it should be in the apis routes, I never thought that it should go on the web ones. Thank you very much!