Laravel单页滚动网站表单错误后停留联系区的实现方法

问题原因 #

表单提交后验证失败时，Laravel默认重定向回原页面，但未携带#contact锚点，导致页面自动滚动到首页（无锚点时默认回到页面顶部）。

解决方法 #

方法一：控制器重定向时添加锚点 #

在处理表单提交的控制器方法中，手动指定验证失败后的重定向URL并拼接#contact锚点：

use Illuminate\Support\Facades\Validator;
use Illuminate\Http\Request;

public function submitContactForm(Request $request)
{
    // 定义表单验证规则
    $validator = Validator::make($request->all(), [
        'name' => 'required|string|max:255',
        'email' => 'required|email',
        'telephone' => 'required|string',
        'message' => 'nullable|string'
    ]);

    // 验证失败时，携带错误信息、用户输入值和锚点重定向回原页面
    if ($validator->fails()) {
        return redirect()->back()
            ->withErrors($validator)
            ->withInput()
            ->fragment('contact'); // 添加锚点定位到联系区域
    }

    // 验证通过后的业务逻辑（如保存数据、发送邮件等）
    // ...

    // 提交成功后也可带锚点保持在联系区域
    return redirect()->back()->fragment('contact')->with('success', '表单提交成功！');
}

方法二：前端JS判断错误并自动滚动 #

若不想修改控制器逻辑，可在Blade模板中添加JavaScript，页面加载时检测是否存在验证错误，存在则自动滚动到联系区域：

@if($errors->any())
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const contactSection = document.getElementById('contact');
        if (contactSection) {
            // 平滑滚动到联系区域顶部
            contactSection.scrollIntoView({ behavior: 'smooth', block: 'start' });
        }
    });
</script>
@endif

前置要求 #

确保联系表单所在的外层容器已设置正确ID：

<!-- 给联系区域的父容器添加id="contact"，与导航锚点对应 -->
<div id="contact" class="content">
    @include('partials.alerts')
    <h1 class="heading">Contact Us</h1>
    <!-- 表单内容 -->
</div>

内容的提问来源于stack exchange，提问作者Narakaya