Why am getting unexpected redirect (302) error when saving the data in Laravel? - laravel

Question

In my application, I am getting the error 302 when trying to save the data. I am posting my codes here, please someone look into this and help me.
HolidayAdd.vue
<template>
<layout>
<div class="container">
<form #submit.prevent="handleSubmit">
<div class="form-group">
<label for="fname">First Name</label>
<input id="fname" type="text" class="form-control" name="ftname" placeholder="Enter your First Name" v-model="holiday.fname">
</div>
<div class="form-group">
<label for="lname">Last Name</label>
<input id="lname" type="text" class="form-control" name="lastname" placeholder="Enter your Last Name" v-model="holiday.lname">
</div>
<div class="form-group">
<label for="sdate">Start Date</label>
<input type="date" class="form-control" name="sdate" v-model="holiday.sdate" id="sdate">
</div>
<div class="form-group">
<label for="edate">End Date</label>
<input type="date" class="form-control" name="edate" v-model="holiday.edate" id="edate">
</div>
<button class="btn btn-info">Apply</button>
</form>
</div>
</layout>
</template>
<script>
import Layout from './../../Shared/Layout'
export default {
components: {
Layout
},
data() {
return {
holiday: {
fname: '',
lname: '',
sdate: '',
edate: ''
}
}
},
methods: {
async handleSubmit() {
let response = await this.$inertia.post('/holiday', this.holiday)
}
}
}
</script>
HolidayController.php
public function store(Request $request)
{
$holiday = $request->validate([
'firstname' => 'required',
'lastname' => 'required',
'startdate' => 'required',
'enddate' => 'required'
]);
Holiday::create($holiday);
return redirect()->route('holiday.index');
}
web.php
Route::group(['middleware' => 'auth'], function() {
Route::resource('holiday', 'HolidayController');
});
As far as I know, there is no error, then why I am getting a 302 error here?

Answer 1

This is happening because of the validation at your store action. you need to change
holiday: {
fname: '',
lname: '',
sdate: '',
edate: ''
}
to
holiday: {
'firstname' : '',
'lastname' : '',
'startdate' : '',
'enddate' : ''
}
and then change v-model to the new names. then you need to do some validation in your front-end.also you shouldn't return a redirect response if request is ajax.