Laravel 9.42表单提交异常：点击Store按钮未存库仅清输入框

核心问题分析 #

点击Store按钮仅清空字段、不入库也不跳转，本质是表单验证未通过，Laravel会自动刷新页面但未在视图中显示错误提示，导致看起来只是清空了字段。具体触发验证失败的问题如下：

1. Description字段缺少name属性 #

Blade视图中，描述的textarea未设置name="description"，但MenuStoreRequest明确要求description为必填项，提交时该字段未被发送到后端，直接触发验证失败。

修复代码：

<div class="sm:col-span-6 pt-5">
  <label for="body" class="block text-sm font-medium text-gray-700">Description</label>
  <div class="mt-1">
    <!-- 添加name="description"，移除多余的wire:model指令 -->
    <textarea id="body" name="description" rows="3" class="shadow-sm focus:ring-indigo-500 appearance-none bg-white border py-2 px-3 text-base leading-normal transition duration-150 ease-in-out focus:border-indigo-500 block w-full sm:text-sm border-gray-300 rounded-md"></textarea>
  </div>
</div>

2. Image字段HTML语法错误 #

Image输入标签里多了一个冗余双引号：id="image" " name="image"，导致HTML解析异常，表单提交时无法正确识别image字段，触发image必填的验证规则。

修复代码：

<div class="sm:col-span-6">
  <label for="image" class="block text-sm font-medium text-gray-700"> Image </label>
  <div class="mt-1">
    <!-- 移除多余的双引号 -->
    <input type="file" id="image" name="image" class="block w-full appearance-none bg-white border border-gray-400 rounded-md py-2 px-3 text-base leading-normal transition duration-150 ease-in-out sm:text-sm sm:leading-5" />
  </div>
</div>

3. 多余的Livewire指令干扰提交 #

视图中出现wire:model.lazy="price"和wire:model.lazy="body"，但当前使用的是普通Laravel控制器，未集成Livewire组件，这些冗余指令可能干扰表单正常提交，建议移除。

修复后的Price字段代码：

<div class="sm:col-span-6 pt-5">
  <label for="body" class="block text-sm font-medium text-gray-700">Price</label>
  <div class="mt-1">
    <!-- 移除wire:model.lazy指令 -->
    <input type="number" min="0.00" max="10000.00" step="0.01" id="price" name="price" class="block w-full appearance-none bg-white border border-gray-400 rounded-md py-2 px-3 text-base leading-normal transition duration-150 ease-in-out sm:text-sm sm:leading-5" />
  </div>
</div>

4. Menu模型未设置批量赋值权限 #

使用Menu::create()方法必须确保模型中配置了$fillable属性，允许指定字段批量赋值，否则数据无法写入数据库。

Menu模型示例代码：

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;

class Menu extends Model
{
    use HasFactory;

    // 允许批量赋值的字段
    protected $fillable = ['name', 'description', 'image', 'price'];
}

额外优化：显示验证错误提示 #

在表单顶部添加错误提示区域，让用户直观看到验证失败原因：

<form method="POST" action="{{ route('admin.menus.store') }}" enctype="multipart/form-data">
  @csrf
  <!-- 添加错误提示区域 -->
  @if ($errors->any())
    <div class="mb-4 p-4 bg-red-100 text-red-700 rounded">
      <ul>
        @foreach ($errors->all() as $error)
          <li>{{ $error }}</li>
        @endforeach
      </ul>
    </div>
  @endif

  <!-- 其余表单字段 -->
</form>

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