Error on input validation even though input exists

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="{{ IlluminateSupportFacadesAuth::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', IlluminateSupportFacadesAuth::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

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