Laravel Inertia未提交表单却显示错误提示及添加提交闪讯的问题

一、解决未提交表单时错误提示框提前显示的问题 #

你的代码里错误提示框的判断逻辑有问题——Inertia初始化时errors可能是空对象而非undefined，导致页面一加载就显示空的错误框。同时，直接用reactive管理表单无法利用Inertia内置的表单状态管理能力，推荐改用官方提供的useForm钩子来处理：

修改后的前端代码（错误提示部分） #

<script setup>
import { useForm } from '@inertiajs/vue3';

// 用useForm替代reactive，自动处理表单状态、错误、提交状态
const form = useForm({
    prefix: null,
    name: null,
    contact_number: null,
    email_id: null
});

const submit = () => {
    form.post('/create', {
        onSuccess: () => form.reset() // 成功后重置表单
    });
};
</script>

<!-- 仅当存在实际错误内容时才显示提示框 -->
<div v-if="form.errors && Object.keys(form.errors).length > 0">
    <div class="bg-orange-100 border-l-4 border-orange-500 text-orange-700 p-4" role="alert">
        <p v-for="(error, field) in form.errors" :key="field">{{ error[0] }}</p>
    </div>
</div>

核心改动：

• 用useForm管理表单，它会在表单提交后才填充错误信息，初始状态下form.errors为空对象
• 错误提示框的判断条件改为form.errors && Object.keys(form.errors).length > 0，确保只有存在错误内容时才显示

二、实现表单提交后的成功闪讯 #

需要后端配合存储闪讯消息，前端接收并展示，步骤如下：

1. 修改后端Laravel代码 #

在创建患者成功后添加闪讯消息，并重定向到列表页：

public function store(Request $request)
{
    $validated = $request->validate([
        'prefix'            => 'required',
        'name'              => 'required|max:50|alpha:ascii',
        'contact_number'    => 'required',
        'email_id'          => 'required|email',
    ]);

    Patient::create($validated);

    // 存储成功闪讯消息（仅在当前请求周期有效）
    session()->flash('success', '患者创建成功！');

    // 注意路由名使用Laravel规范的点分隔格式
    return to_route('patients.index');
}

2. 共享闪讯消息到前端 #

打开app/Http/Middleware/HandleInertiaRequests.php，在share方法中添加闪讯消息的共享逻辑：

public function share(Request $request)
{
    return array_merge(parent::share($request), [
        'success' => $request->session()->get('success'),
    ]);
}

3. 前端添加成功闪讯展示 #

在模板中加入成功提示框：

<!-- 成功闪讯：仅当存在success消息时显示 -->
<div v-if="$page.props.success" class="bg-green-100 border-l-4 border-green-500 text-green-700 p-4" role="alert">
    <p>{{ $page.props.success }}</p>
</div>

这样表单提交成功后，页面会显示一次成功提示，刷新或跳转后消息自动消失。

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