Laravel编辑模态框验证返回422 Unprocessable Entity错误如何解决

问题根因 #

1. 编辑接口的验证规则未忽略当前编辑数据的ID，用户未修改name/email字段直接提交时，unique规则会命中当前已存在的记录，触发422验证错误
2. 编辑表单走AJAX异步提交，你仅处理了新增模态框的验证错误唤起逻辑，未处理AJAX请求的验证错误响应，验证失败后不会保留编辑模态框也不会显示错误信息
3. 编辑表单的字段值未配置old()优先规则，验证失败后会丢失用户修改的内容，回退到数据库原始值

修复步骤 #

1. 修正控制器验证规则 #

修改update方法的验证逻辑，给unique规则加上当前ID忽略配置：

public function update(Request $request, $id)
{
    $request->validate([
        'code' => "required",
        'name' => "required|unique:vendors,name,".$id,
        'email' => "required|email|unique:vendors,email,".$id,
        'phone' => "required|min:8",
        'address' => "required|max:300",
    ]);
    Vendor::where('id', $id)->update([
        'code' => $request->code,
        'name' => $request->name,
        'email' => $request->email,
        'phone' => $request->phone,
        'address' => $request->address,
    ]);
    // 同步提交场景需补充跳转逻辑
    return redirect()->route('admin.vendor.index')->with('success', '修改成功');
}

2. 修正编辑表单的回填逻辑 #

把编辑模态框内所有输入框的value属性改为old()优先，保证验证失败后保留用户输入内容：

<!-- 示例为code字段，其余字段按相同规则修改 -->
<input type="text" id="code" name="code"
       class="form-control  @error('code')  is-invalid @enderror"
       value="{{ old('code', $vendor->code) }}"/>

3. 适配表单提交逻辑（二选一即可） #

方案A：和新增表单对齐用同步提交

• 给编辑表单补充action属性：

<form id="formData" action="{{ route('admin.vendorupdate', $vendor->id) }}" method="post">

• 删掉原有$('.btn-update')绑定的AJAX点击事件，将编辑模态框的提交按钮改为普通submit类型
• 补充编辑模态框的错误唤起逻辑，修改控制器验证逻辑，给编辑错误加闪存标识：

// 替换update方法的验证部分
$validator = \Validator::make($request->all(), [
    'code' => "required",
    'name' => "required|unique:vendors,name,".$id,
    'email' => "required|email|unique:vendors,email,".$id,
    'phone' => "required|min:8",
    'address' => "required|max:300",
]);
if ($validator->fails()) {
    return redirect()->back()->withErrors($validator)->with('is_edit_error', true)->with('edit_id', $id)->withInput();
}

• 修改前端错误判断逻辑：

@if ($errors->any())
    @if(session('is_edit_error'))
        let editId = {{ session('edit_id') }};
        $.ajax({
            url: `/admin/${editId}/vendor`,
            method: "GET",
            success: function (data) {
                $('#modalEdit').find('.modal-body').html(data);
                $('#modalEdit').modal('show');
            }
        })
    @else
        $('#modalTambah').modal({
            show: true
        });
    @endif
@endif

方案B：保持AJAX提交，前端处理错误

修改$('.btn-update')绑定的AJAX请求的error回调，手动渲染验证错误：

$('.btn-update').on('click', function () {
    let id = $('#formData').find('#vendor-id').val();
    let formEdit = $('#formData').serialize();
    $.ajax({
        url: `/admin/vendor/store/${id}`,
        method: "PATCH",
        data: formEdit,
        success: function () {
            $('#modalEdit').modal('hide');
            window.location.assign('vendor');
        },
        error: function (error) {
            if (error.status === 422) {
                let errors = error.responseJSON.errors;
                // 清空原有错误样式
                $('.text-danger').remove();
                $('.is-invalid').removeClass('is-invalid');
                $('label').removeClass('text-danger');
                // 遍历渲染新错误
                $.each(errors, function (field, messages) {
                    let input = $(`[name="${field}"]`);
                    input.addClass('is-invalid');
                    input.prev('label').addClass('text-danger');
                    input.after(`<span class="text-danger">${messages[0]}</span>`);
                });
            }
        }
    })
})

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