Laravel 表单验证在表单错误时重定向回主页，而不是停留在同一页面

Question

我有一个联系表单，提交后可以成功发送到数据库。问题是当我在网页上检查验证时。使用 Laravel $error 验证可以正确显示错误。问题是，当出现错误时，我的网页总是重定向回主页，而不是页面仍然显示错误。我必须继续向下滚动到我的联系表所在的位置才能看到错误；这会惹恼我未来的用户。如果出现错误，如何使页面保持在原来的位置？注意：当表单有效并提交时，我的页面会正确重定向。这不是问题。注 2：我创建了一个单页网页，导航链接会将您带到该网页。没有重定向。相反，它是一个 HTML 页面。

网页.php

Route::get('/', 'HomeController@index')->name('home');
Route::post('/contact/submit', 'MessagesController@submit');

消息控制器.php

namespace App\Http\Controllers;

use App\Message;
use Illuminate\Http\Request;

class MessagesController extends Controller
{
    public function submit(Request $request)
    {
        $validatedData = $request->validate([
            'name' => 'required|min:2',
            'email' => 'required|max:255',
            'phonenumber' => 'required|min:10|max:10',
            'message' => 'required|min:5',
        ]);

        Message::create($validatedData);

        return redirect('/')->with('success', 'Your message has been 
            successfully sent. We will reach out to you soon');
    }
}

contact.blade.php

{{--CONTACT FORM--}}
<section id="contact">
    <div class="container-fluid padding">
        <div class="row text-center padding">
            <div class="col-12">
                <h2 class="lead display-3">Contact Us</h2>
                <hr class="my-4">

                <form action="/contact/submit" method="POST">
                    @csrf
                    <div class="field">
                        <label for="name" class="label">Name</label>

                        <div class="control">
                            <input type="text" class="input {{$errors->has('name') ? 'is-danger' : 'is-success'}}"
                                   name="name" placeholder="Project Title" value="{{old('name')}}">
                        </div>
                    </div>

                    <div class="field">
                        <label for="name" class="label">Email</label>

                        <div class="control">
                            <input type="text" class="input {{$errors->has('email') ? 'is-danger' : 'is-success'}}"
                                   name="email" placeholder="Project Title" value="{{old('email')}}">
                        </div>
                    </div>
                    
                    <div class="field">
                        <label for="name" class="label">Phone Number</label>

                        <div class="control">
                            <input type="text"
                                   class="input {{$errors->has('phonenumber') ? 'is-danger' : 'is-success'}}"
                                   name="phonenumber" placeholder="Project Title" value="{{old('phonenumber')}}">
                        </div>
                    </div>

                    <div class="field">
                        <label for="message" class="label">Message</label>
                        <div class="control">
                            <textarea name="message"
                                      class="textarea {{$errors->has('message') ? 'is-danger' : 'is-success'}}"
                                      placeholder="Project description">{{old('message')}}</textarea>
                        </div>
                    </div>

                    <div class="field">
                        <div class="control">
                            <button type="submit" class="button is-link">Create Project</button>
                        </div>
                    </div>

                    <!--Errors variable used from form validation -->
                    @if($errors->any())
                        <div class="notification is-danger">
                            <ul>
                                @foreach($errors->all() as $error)
                                    <li>{{$error}}</li>
                                @endforeach
                            </ul>
                        </div>
                    @endif
                </form>
            </div>
        </div>
    </div>
</section>

Answer 1

您需要创建一个手动验证器，以便在验证失败时可以控制重定向（我认为这就是您遇到的问题）。

public function submit(Request $request)
    {
        $validator = Validator::make($request->all(),[
            'name' => 'required|min:2',
            'email' => 'required|max:255',
            'phonenumber' => 'required|min:10|max:10',
            'message' => 'required|min:5',
        ]);

        if ($validator->fails()) {
            return redirect(url()->previous() .'#contact')
                    ->withErrors($validator)
                    ->withInput();
        }

        Message::create($request->all());

        return redirect('/')->with('success', 'Your message has been 
            successfully sent. We will reach out to you soon');
    }

Answer 2

首先，将错误移至表单顶部，以便您可以看到它们。

<form action="/contact/submit" method="POST">
    @csrf
    @if($errors->any())
        <div class="notification is-danger">
            <ul>
                @foreach($errors->all() as $error)
                    <li>{{$error}}</li>
                @endforeach
            </ul>
        </div>
    @endif

处理验证的更好方法是使用表单请求将其分开。

php artisan make:request SendMessageRequest

php artisan make:request SendMessageRequest

如果验证失败，将自动生成重定向响应，将用户发送回之前的位置。

现在更新您的控制器。

namespace App\Http\Requests;

use Illuminate\Foundation\Http\FormRequest;

class SendMessageRequest extends FormRequest
{
    public function authorize()
    {
        return true;
    }
    
    public function rules()
    {
        return [
            'name' => 'required|min:2',
            'email' => 'required|max:255',
            'phonenumber' => 'required|min:10|max:10',
            'message' => 'required|min:5',
        ];
    }
}

Validator您可以使用和重定向将验证保留在控制器中back()，但第一种方法是更好的方法。

use App\Http\Requests\SendMessageRequest;
use App\Message;

class MessagesController extends Controller
{
    public function submit(SendMessageRequest $request)
    {
        Message::create($request->validated());

        return redirect('/')->with('success', 'Your message has been
            successfully sent. We will reach out to you soon');
    }
}