Error on input validation even though input exists - php

Question

I have an application where an user can change his name via a pop-up.
This is the method that handles the name change:
public function changeVorname(Request $request) {
$this->validate($request, [
'vorname' => 'required|max:255',
]);
Portal::query()->where('email', $request->email)->update(['vorname' => $request->neuer_vorname]);
return redirect()->back()->with('message', 'Vorname erfolgreich geändert');
}
This is the blade file with the modal:
<div class="w-1/2 mb-4 pb-3 text-lg">
<p>Vorname:</p>
<input type="text" name="vorname" id="vorname"
value="{{ \Illuminate\Support\Facades\Auth::guard('portal')->user()->vorname }}"
class="flex text-center bg-gray-100 border-gray-500 shadow-2xl
border-opacity-50 border-2 w-full p-4 rounded-lg #error('vorname') border-red-500 #enderror"
readonly>
#error('vorname')
<div class="text-red-500 mt-2 text-sm">
{{ 'Der Vorname darf keine Zahlen enthalten und nicht leer sein' }}
</div>
#enderror
<div class="text-right">
<button id="change_vorname" class="md:pl-2" name="change_vorname">
Vorname bearbeiten
</button>
</div>
</div>
<div id="change_vorname_modal"
class="modal fixed ml-96 top-20 mx-auto p-5 border w-96 shadow-lg rounded-md bg-white hidden">
<div class="mt-3 text-center text-xl">
Neuer Vorname
</div>
<div class="items-center px-4 py-3">
<label for="neuer_vorname" class="sr-only">Neuer Vorname</label>
<form
action="{{ route('change_vorname', \Illuminate\Support\Facades\Auth::guard('portal')->user()->email) }}"
method="post">
#csrf
<input type="text" name="neuer_vorname" id="neuer_vorname"
placeholder="Neuer Vorname" value=""
class="flex text-center text-sm mb-2 bg-gray-100 border-gray-500 shadow-2xl border-opacity-50 border-2 w-full p-4 rounded-lg">
<button type="submit" id="ok_btn" class="mb-4 pb-3 w-full text-white px-4 py-3 rounded text-base font-medium
bg-gradient-to-r from-green-400 to-blue-500 float-right shadow transition
duration-500 ease-in-out transform hover:-translate-y-1 hover:scale-100
shadow-2xl border-2 w-full p-4 rounded-lg">
Vorname ändern
</button>
</form>
</div>
<div class="items-center px-4 py-3">
<button id="back" class="mb-4 pb-3 w-full text-white px-4 py-3 rounded text-base font-medium
bg-gradient-to-r from-green-400 to-blue-500 float-right shadow transition
duration-500 ease-in-out transform hover:-translate-y-1 hover:scale-100
shadow-2xl border-2 w-full p-4 rounded-lg">
zurück
</button>
</div>
</div>
#if(session()->has('message'))
<div class="alert alert-success">
{{ session()->get('message') }}
</div>
#endif
<script>
var vorname_modal = document.getElementById("change_vorname_modal");
var vorname_btn = document.getElementById("change_vorname");
var back_btn = document.getElementById("back");
vorname_btn.onclick = function () {
vorname_modal.style.display = "block";
}
back_btn.onclick = function () {
vorname_modal.style.display = "none";
}
window.onclick = function (event) {
if (event.target == modal) {
vorname_modal.style.display = "none";
}
}
</script>
The issue is when I have the required in the request validation I always get the error, when I delete the required everything works perfectly. I need it because a user should not be able to rename his name to an empty one.

Answer 1

You have a mistake on name of new name input. its not same as validators key
change your validator like this
$this->validate($request, [
'neuer_vorname' => 'required|max:255',
]);
it will work