Laravel结合Ajax表单提交重复显示错误内容的解决办法

问题原因 #

每次提交表单时，你通过append方法往.alert-danger容器里追加错误信息，但没有提前清空容器内的旧内容，导致多次提交后已修复的错误会重复累积显示。同时，原代码将动画和定时器逻辑放在循环内部，会导致重复触发动画效果。

前端代码修复 #

修改Ajax请求的success回调逻辑，先清空错误容器再添加新错误，并将动画逻辑移到循环外：

$('#basicInfoForm').submit(function(e){
    e.preventDefault();
    let formData = new FormData(this);
    $.ajax({
        type: "POST",
        url: "{{route('profile.basic_info')}}",
        dataType: 'json',
        data: formData,
        contentType: false,
        processData: false,
        beforeSend:function(){
            $("#fountainG").fadeIn(1000);
            // 提交时先隐藏并清空错误容器
            $('.alert-danger').empty().hide();
        },
        success: function(response){
            $("#fountainG").fadeOut(1000);
            if(response.errors){
                $('.alert-danger').fadeIn(2000);
                // 循环添加新错误
                $.each(response.errors, function (key, value) { 
                    $('.alert-danger').append('<span>'+value+'</span>'+'<br>');
                });
                // 统一设置隐藏定时器
                setTimeout(function() {
                    $('.alert-danger').fadeOut(4000, 'swing');
                }, 3000);
            } else {
                // 处理验证通过的情况
                iziToast.success({
                    title: '成功',
                    message: '基本信息更新成功',
                    position: 'topRight'
                });
                // 可选：重置表单
                $('#basicInfoForm')[0].reset();
            }
        },
        error: function(data){
            $("#fountainG").fadeOut(1000);
            iziToast.error({
                title: '上传错误',
                message: data.responseJSON?.message || '操作失败',
                position: 'topRight'
            });
        }
    });
});

后端代码优化 #

1. 验证通过后返回成功响应，避免前端无反馈
2. 修正邮箱唯一验证规则，排除当前用户ID（更新场景下）

use Illuminate\Support\Facades\Auth;

public function updateBasicInformation(Request $request)
{
    $basic_info = Validator::make($request->all(), [
        'fullname' => 'required|min:2|max:255',
        'phone_number' => 'required|numeric|min:10',
        // 排除当前用户ID，避免自己的邮箱被判定为重复
        'email' => 'required|unique:users,email,'.Auth::id(),
        'country' => 'required',
        'address' => 'required',
    ], [
        'phone_number.min' => "电话号码至少需要10位",
    ]);

    if($basic_info->fails())
    {
        return response()->json([
            'errors'=> $basic_info->errors()->all()
        ]);
    }

    // 执行用户信息更新逻辑
    $user = Auth::user();
    $user->update($request->only(['fullname', 'phone_number', 'email', 'country', 'address']));

    // 返回成功响应
    return response()->json([
        'success' => '基本信息已成功更新'
    ]);
}

额外说明 #

• 在beforeSend阶段提前清空并隐藏错误容器，能避免提交过程中旧错误依然显示的问题
• 后端添加Auth::id()到邮箱验证规则，是更新场景下的必要处理，否则用户无法保留原有邮箱
• 补充了验证通过后的成功提示和表单重置，提升用户体验

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