Laravel Inertia Dynamic Form Validation - laravel

Question

I have a button that when clicked, adds some inputs to a form:
<a #click="addNewText()" class="items-center px-4 py-2 bg-gray-800 border border-transparent rounded-md font-semibold text-xs text-white uppercase tracking-widest hover:bg-gray-700 active:bg-gray-900 focus:outline-none focus:border-gray-900 focus:shadow-outline-gray transition ease-in-out duration-150">
<i class="far fa-2x fa-plus-square"></i>
</a>
I am using Laravel 8 and Inertia and want to validate my form. When I try to validate, the form inputs don't show up in $request->input('texts'); if the form is empty. If the form inputs are filled, then they show up?
Here is my controller code:
public function index()
{
$texts = [];
$texts = collect(
[
['skill_level' => null, 'word_count' => null, 'title' => null, 'description' => null, 'category' => null]
]
);
//dd($texts->toJson());
//return the view
return Inertia::render('Client/OrderFormBuilder/GiantIndex', [
"allTexts" => $texts->toJson()
]);
}
public function setOrderDetails(Request $request)
{
$texts = $request->input('texts.*');
$rules = [];
$messages = [];
for ($i = 0; $i < count($texts); $i++)
{
$rules['texts[' . $i . '][skill_level]'] = 'required';
$rules['texts[' . $i . '][word_count]'] = 'required';
$rules['texts[' . $i . '][category]'] = 'required';
//$rules['texts.' . $i . '.title'] = 'required|string|min:5|max:10000';
//$rules['texts.' . $i . '.description'] = 'required|string|min:10|max:10000000';
}
for ($i = 0; $i < count($texts); $i++)
{
$messages['texts[' . $i . '][skill_level].required'] = 'Please Enter Your Desired Skill Level.';
$messages['texts[' . $i . '][word_count].required'] = 'Please Enter Your Desired Word Count.';
$messages['texts[' . $i . '][category].required'] = 'Please Enter Your Desired Category.';
/*
$messages['texts.' . $i . '.title.required'] = 'A Title Is Required For Your Text.';
$messages['texts.' . $i . '.title.string'] = 'Please Enter A Valid Title For Your Text.';
$messages['texts.' . $i . '.title.min'] = 'Please Enter A Minimum Of 5 Characters For Your Title.';
$messages['texts.' . $i . '.title.max'] = 'Please Enter A Maximum Of 10000 Characters For Your Title.';
$messages['texts.' . $i . '.description.required'] = 'A Description Is Required For Your Text.';
$messages['texts.' . $i . '.description.string'] = 'Please Enter A Valid Description For Your Text.';
$messages['texts.' . $i . '.description.min'] = 'Please Enter A Minimum Of 10 Characters For Your Description.';
$messages['texts.' . $i . '.description.max'] = 'Please Enter A Maximum Of 10000000 Characters For Your Description.';
*/
}
//dd($texts, $rules, $messages);
Validator::make($texts, $rules, $messages)->validateWithBag('updateOrderFormBuilder');
}
And here is my Vue form template code:
<div v-for="(singleText, index) in form.texts" v-bind:key="index" class="shadow sm:rounded-md sm:overflow-hidden mt-5">
<div class="bg-white py-6 px-4 space-y-6 sm:p-6">
<div class="col-span-6 sm:col-span-4">
<div>
<label class="block font-medium text-sm text-gray-700" for="skill_level">Skill Level</label>
<input :id="'skill_level_' + index" :name="'texts[' + index + '][skill_level]'" type="text" class="form-input rounded-md shadow-sm mt-1 block w-full" v-model="singleText.skill_level" :autocomplete="'texts[' + index + '][skill_level]'" />
<div v-if="form.error('texts[' + index + '][skill_level]')">
<p class="text-sm text-red-600">
{{ form.error('texts[' + index + '][skill_level]') }}
</p>
</div>
<label class="block font-medium text-sm text-gray-700" for="word_count">Word Count</label>
<input :id="'word_count_' + index" :name="'texts[' + index + '][word_count]'" type="text" class="form-input rounded-md shadow-sm mt-1 block w-full" v-model="singleText.word_count" :autocomplete="'texts[' + index + '][word_count]'" />
<div v-if="form.error('texts[' + index + '][word_count]')">
<p class="text-sm text-red-600">
{{ form.error('texts[' + index + '][word_count]') }}
</p>
</div>
<label class="block font-medium text-sm text-gray-700" for="category">Category</label>
<input :id="'category_' + index" :name="'texts[' + index + '][category]'" type="text" class="form-input rounded-md shadow-sm mt-1 block w-full" v-model="singleText.category" :autocomplete="'texts[' + index + '][category]'" />
<div v-if="form.error('texts[' + index + '][category]')">
<p class="text-sm text-red-600">
{{ form.error('texts[' + index + '][category]') }}
</p>
</div>
</div>
</div>
Finally, here is my Vue code:
props: ['allTexts'],
data: function() {
return {
showingNavigationDropdown: false,
text: {
skill_level: null,
word_count: null,
title: null,
description: null,
category: null,
},
form: this.$inertia.form({
'_method': 'POST',
texts: [],
}, {
bag: 'updateOrderFormBuilder',
resetOnSuccess: false,
}),
}
},
mounted: function () {
this.form.texts = JSON.parse(this.allTexts); //this.allTexts;
console.log(this.form.texts);
},
methods: {
switchToTeam(team) {
this.$inertia.put(route('current-team.update'), {
'team_id': team.id
}, {
preserveState: false
})
},
logout() {
axios.post(route('logout').url()).then(response => {
window.location = '/';
})
},
submit() {
this.$inertia.post(route('create-new-order.set-order-details-by-form', this.form), {
preserveScroll: true
})
},
addNewText() {
if(this.form.texts.length < 20)
{
this.form.texts.push(this.text);
console.log(this.form.texts, this.text);
}
},
removeText: function(index) {
if(this.form.texts.length > 1)
{
this.form.texts.splice(index, 1);
}
}
}
Why, when I click on the submit button does $request->input('texts.*'); not work? It always shows nothing when the form is empty, and only shows the inputs when they have been filled in the form?

Answer 1

I think you need to use and send your form.text data. Notice that your inertia.post() are using different parameter