为何验证错误未显示在#response div中，反而出现422错误？

首先，你遇到的422错误是HTTP标准状态码，意思是服务器已经接收到你的请求，但请求数据不符合验证规则，所以返回了验证失败的响应。之所以没法在#response里显示错误，核心原因是你的AJAX请求只处理了成功（2xx状态码）的情况，没有捕获422这类错误状态的响应。

问题根源 #

默认情况下，jQuery的$.ajax()只会在请求返回2xx状态码时触发success回调，而422属于客户端错误状态码，会走error回调（或者用fail()方法）。如果没写错误处理逻辑，自然没法拿到服务器返回的验证错误信息，也就没法显示在页面上。

解决方案 #

我们需要修改AJAX请求，添加错误处理逻辑，解析服务器返回的验证错误并渲染到#response中。下面是完整的示例代码（假设你用的是类似Laravel的后端框架，这类框架验证失败会返回JSON格式的错误数组）：

// 绑定步骤1表单的提交事件
$('#step1-form').on('submit', function(e) {
    e.preventDefault(); // 阻止默认表单提交

    // 先清空之前的错误提示，避免重复显示
    $('#response').empty().removeClass('alert alert-danger');

    $.ajax({
        url: 'http://store.test/product/1/product-test/payment/storeUserInfo',
        method: 'POST',
        data: $(this).serialize(), // 序列化表单数据
        // 如果是Laravel等框架，必须携带CSRF令牌，否则会触发419错误
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        },
        success: function(response) {
            // 验证通过，切换到步骤2
            $('#step1').hide();
            $('#step2').show();
        },
        error: function(xhr) {
            // 捕获422状态码的验证错误
            if (xhr.status === 422) {
                // 解析服务器返回的JSON错误数据
                const errors = xhr.responseJSON.errors;
                let errorHtml = '<div class="alert alert-danger">';
                
                // 遍历所有错误信息，拼接成HTML
                $.each(errors, function(field, messages) {
                    // 每个字段可能有多个错误，这里取第一个示例
                    errorHtml += `<p>${messages[0]}</p>`;
                });
                
                errorHtml += '</div>';
                // 将错误HTML插入到#response容器中
                $('#response').html(errorHtml);
            }
        }
    });
});

额外注意事项 #

• 确认服务器返回格式：确保后端返回的是JSON格式的错误数据，比如Laravel中使用validate()方法失败时，会自动返回包含errors字段的JSON响应。
• CSRF令牌验证：如果你的后端启用了CSRF保护（比如Laravel），一定要在AJAX请求头中携带CSRF令牌，否则会出现419错误，这也是常见的坑。
• 清空旧错误：每次提交前清空#response的内容，避免新旧错误叠加显示。

这样修改后，当表单验证失败返回422错误时，前端就能正确捕获并显示错误信息了。

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