如何将Laravel验证错误数传递到JavaScript变量中

问题原因 #

你当前的代码无效，核心原因是点击提交按钮时表单还未完成提交，Laravel的$errors集合此时是空的，自然拿不到错误数。而且这种写法仅在表单提交后页面刷新的场景下才可能生效，但你需要的是提交后直接用JS提示，得换正确的传递逻辑。

方案一：传统表单提交（页面刷新场景） #

如果是普通表单提交（提交后页面刷新），可以在页面加载时就把错误数注入到JS变量，而非点击按钮时才获取：

<!-- 在页面底部、引入业务JS之前，先注入错误数据 -->
<script>
    const errorCount = {{ $errors->count() }};
    // 页面加载完成后检查是否有验证错误
    document.addEventListener('DOMContentLoaded', function() {
        if (errorCount > 0) {
            Swal.fire({
                icon: 'error',
                title: '必填项未填写',
                text: `您还有 ${errorCount} 个必填项未完成，请检查后重试`
            });
        }
    });
</script>

方案二：AJAX无刷新提交场景 #

如果用AJAX提交表单，无需依赖Laravel的$errors集合，直接在后端返回错误数，前端接收后处理：

后端Laravel控制器代码 #

public function store(Request $request)
{
    $validator = Validator::make($request->all(), [
        // 自定义你的验证规则
        'name' => 'required',
        'email' => 'required|email',
    ]);

    if ($validator->fails()) {
        return response()->json([
            'success' => false,
            'error_count' => $validator->errors()->count(),
            'errors' => $validator->errors()
        ], 422);
    }

    // 验证通过后的业务逻辑
    return response()->json(['success' => true]);
}

前端AJAX代码 #

$("#btn-submit").click(function(event) {
    event.preventDefault(); // 阻止默认表单提交行为

    $.ajax({
        url: '/your-form-action-url', // 替换为你的表单提交路由
        method: 'POST',
        data: $('#your-form-id').serialize(), // 替换为你的表单ID
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        },
        success: function(response) {
            // 提交成功的提示
            Swal.fire('提交成功！', '', 'success');
        },
        error: function(xhr) {
            if (xhr.status === 422) {
                const errorCount = xhr.responseJSON.error_count;
                Swal.fire({
                    icon: 'error',
                    title: '必填项未填写',
                    text: `您还有 ${errorCount} 个必填项未完成，请检查后重试`
                });
            }
        }
    });
});

注意事项 #

• 确保已引入SweetAlert的JS和CSS文件
• AJAX场景下必须携带CSRF令牌，避免Laravel的CSRF验证错误
• 传统提交场景中，$errors仅在表单验证失败后才有数据，因此页面加载时判断即可

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