多步骤表单Ajax提交后如何在视图展示验证错误？

首先，我们需要分后端处理和前端渲染两部分来实现，还能完美复用你现有的errors.blade.php文件，不用重复写错误展示的逻辑。

第一步：后端控制器处理验证并返回错误 #

在storeUserInfo方法中，我们需要完成验证，并在失败时返回合适的响应——这里有两种省心的方式：

方式1：返回结构化错误数据（前端自行渲染） #

use Illuminate\Http\Request;
use Illuminate\Support\Facades\Validator;

public function storeUserInfo(Request $request)
{
    // 定义字段验证规则
    $validator = Validator::make($request->all(), [
        'name' => 'required|string|max:255',
        // 按需添加其他字段的规则，比如邮箱、手机号等
    ]);

    // 验证失败时返回JSON格式错误，状态码用422（表示请求格式合法但内容不符合要求）
    if ($validator->fails()) {
        return response()->json([
            'errors' => $validator->errors()
        ], 422);
    }

    // 验证通过后的逻辑：比如把用户信息存入会话或数据库
    session()->put('user_basic_info', $request->only('name', ...));

    return response()->json(['success' => true]);
}

方式2：直接返回渲染好的错误视图（完全复用errors.blade.php） #

这种方式不用在前端写重复的HTML结构，直接让后端帮你渲染好错误视图的内容：

if ($validator->fails()) {
    // 传入错误对象渲染errors.blade.php，拿到HTML字符串
    $errorsHtml = view('errors', ['errors' => $validator->errors()])->render();
    return response()->json(['errors_html' => $errorsHtml], 422);
}

第二步：前端Ajax处理错误并展示 #

先在第一步表单上方预留一个错误容器：

<div id="step-1-error-box"></div>
<form id="step-1-form">
    <!-- 姓名等输入字段 -->
    <button type="button" id="btn-to-step2">进入第二步</button>
</form>

对应方式1的前端代码（自行渲染错误） #

用jQuery示例（你也可以换成原生JS或Vue等框架）：

$('#btn-to-step2').click(function(e) {
    e.preventDefault();
    const $errorBox = $('#step-1-error-box');
    
    // 提交前清空旧错误
    $errorBox.empty();

    $.ajax({
        url: "{{ route('storeUserInfo') }}", // 替换成你的实际路由地址
        method: 'POST',
        data: $('#step-1-form').serialize(),
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        },
        success: function(response) {
            // 验证通过，切换到第二步表单
            $('#step-1-form').hide();
            $('#step-2-form').show();
        },
        error: function(xhr) {
            if (xhr.status === 422) {
                const errors = xhr.responseJSON.errors;
                let errorHtml = '<div class="alert alert-danger"><ul>';
                
                // 遍历所有错误信息并生成列表项
                $.each(errors, function(field, messages) {
                    errorHtml += `<li>${messages[0]}</li>`;
                });
                
                errorHtml += '</ul></div>';
                $errorBox.html(errorHtml);
            }
        }
    });
});

对应方式2的前端代码（复用错误视图） #

这种方式更简洁，直接把后端返回的HTML插入容器即可：

$('#btn-to-step2').click(function(e) {
    e.preventDefault();
    const $errorBox = $('#step-1-error-box');
    
    $errorBox.empty();

    $.ajax({
        url: "{{ route('storeUserInfo') }}",
        method: 'POST',
        data: $('#step-1-form').serialize(),
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        },
        success: function(response) {
            // 切换到第二步表单
            $('#step-1-form').hide();
            $('#step-2-form').show();
        },
        error: function(xhr) {
            if (xhr.status === 422) {
                // 直接插入后端渲染好的错误HTML
                $errorBox.html(xhr.responseJSON.errors_html);
            }
        }
    });
});

额外提示 #

• 确保你的errors.blade.php是基于$errors变量编写的（比如包含@if($errors->any())这类逻辑），这样方式2才能正常工作。
• 如果不用jQuery，用原生Fetch API也能实现，核心逻辑都是捕获422状态码的响应，解析后处理错误信息。

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