Laravel Jetsream Interia Error Handling Issues

Question

I was just taking Jetstream/Interia for a spin and wanted to checkout. So, I created a form, with 2 input fields.

Start Date
End Date

I have a route which recieves this over GET request and try to validate it. Like so

web.php

Route::middleware(['auth:sanctum', 'verified'])->get('/asteroids', [\App\Http\Controllers\AsteroidController::class, 'index'])->name('asteroids.index');

Route::middleware(['auth:sanctum', 'verified'])->get('/asteroids/process', [\App\Http\Controllers\AsteroidController::class, 'process'])->name('asteroids.process');


<?php

namespace App\Http\Controllers;

use Inertia\Inertia;
use Illuminate\Http\Request;
use App\Http\Requests\AsteriodDateRequest;

class AsteroidController extends Controller
{
    public function index()
    {
        return Inertia::render('Asteroids/Index');
    }

    public function process(AsteriodDateRequest $request)
    {
        //
    }
}

AsteriodDateRequest
    public function rules()
    {
        return [
            'start_date' => ['required', 'date'],
            'end_date' => ['required', 'date'],
        ];
    }

The problem I am facing is I am not able to display any validation error messages. Below is my code Vue Code

<jet-form-section @submitted="submitDates">
    <template #title>
        Update Password
    </template>

    <template #description>
        Ensure your account is using a long, random password to stay secure.
    </template>

    <template #form>
        <div class="col-span-6 sm:col-span-4">
            <jet-label for="start_date" value="Start Date" />
            <jet-input id="start_date" type="date" class="mt-1 block w-full" v-model="form.start_date" ref="start_date" autocomplete="start_date" />
            <jet-input-error :message="form.errors.start_date" class="mt-2" />
        </div>
        <div class="col-span-6 sm:col-span-4">
            <jet-label for="end_date" value="End Date" />
            <jet-input id="end_date" type="date" class="mt-1 block w-full" v-model="form.end_date" ref="end_date" autocomplete="end_date" />
            <jet-input-error :message="form.errors.end_date" class="mt-2" />
        </div>


    </template>

    <template #actions>
        <jet-action-message :on="form.recentlySuccessful" class="mr-3">
            Saved.
        </jet-action-message>

        <jet-button :class="{ 'opacity-25': form.processing }" :disabled="form.processing">
            Save
        </jet-button>
    </template>
</jet-form-section>

<script>
import JetActionMessage from '@/Jetstream/ActionMessage'
import JetButton from '@/Jetstream/Button'
import JetFormSection from '@/Jetstream/FormSection'
import JetInput from '@/Jetstream/Input'
import JetInputError from '@/Jetstream/InputError'
import JetLabel from '@/Jetstream/Label'

export default {
    components: {
        JetActionMessage,
        JetButton,
        JetFormSection,
        JetInput,
        JetInputError,
        JetLabel,
    },

    data() {
        return {
            form: this.$inertia.form({
                start_date: '',
                end_date: '',
            }),
        }
    },
    methods: {
        submitDates() {
            this.form.get(route('asteroids.process'), {
                errorBag: 'submitDates',
                preserveScroll: true,
                onSuccess: () => this.form.reset(),
                
            })
        },
    },
}
</script>

here is the [![Screenshot][1]][1] of the response. Please let me know what I am doing wrong here.


  [1]: https://i.stack.imgur.com/diaf4.png

score 0 · Answer 1 · answered Apr 05 '21 at 01:48

I'm not an expert on Inertia, but it looks like your form.errors object is empty (see the top of your screenshot). Inertia documentation says it's only errors.* instead of form.errors.* , so maybe try replacing the relevant lines. Otherwise, I believe there is a onError: errors => {} callback, where you might be able to populate the form.errors.* object.

        submitDates() {
            this.form.get(route('asteroids.process'), {
                errorBag: 'submitDates',
                preserveScroll: true,
                onSuccess: () => this.form.reset(),
                onError: errors => { this.form.errors = errors; }, // maybe something like this works?
            })
        },

Laravel Jetsream Interia Error Handling Issues

1 Answers1