Php 为什么验证错误没有出现在#回应"；迪夫？（取而代之的是422不可处理实体）

我正在尝试使用jQuery和AJAX创建一个多步骤表单，我想用一个AJAX post请求来验证每个步骤。但是当单击“转到步骤2”时，我遇到了这个错误，并且出现了验证错误：

jquery.min.js:4
POST http://store.test/product/1/product-test/payment/storeUserInfo 
422 (Unprocessable Entity)

但当出现验证错误时，我必须在div“#response”中显示验证错误。你知道这为什么不起作用吗

问题的相关代码：

我有一个PaymentController有一个storeUserInfo（）方法，它是步骤1的方法：

 public function storeUserInfo(Request $request, $id, $slug = null, Validator $validator){

        $validator = Validator::make($request->all(),[
            'buyer_name' => 'required|max:1|string',
            'buyer_surname' => 'required|max:255|string',
            'buyer_email' => 'required|max:255|string',
            'name_invoice' => 'required|max:255|string',
            'country_invoice' => 'required|max:255|string',
        ]);

        if($validator->passes())
        {
            return response()->json([
                'success' => true,
                'message' => 'success'
            ], 200);
        }
        $errors = $validator->errors();
        $errors =  json_decode($errors);

        return response()->json([
            'success' => false,
            'message' => $errors
        ], 422);
    }

路线：

  Route::post('/product/{id}/{slug?}/payment/storeUserInfo', [
    'uses' => 'PaymentController@storeUserInfo',
    'as'   =>'products.storeUserInfo'
]);

//步骤1和步骤2 html

<div class="tab-pane fade show active clearfix" id="step1" role="tabpanel" aria-labelledby="home-tab">
    <h6>User Info</h6>
    <div id="response"></div> <!-- div to show errors -->
    <form method="post" id="step1form" action="">
         {{csrf_field()}}
        <div class="form-group font-size-sm">
            <label for="name" class="text-gray">Name</label>
            <input name="name" type="text" required class="form-control"  value="{{ (\Auth::check()) ? Auth::user()->name : old('name')}}">
        </div>
        <!-- other form fields -->
        <input type="submit" id="goToStep2" href="#step2"
                class="btn btn-primary btn float-right next-step" value="Go to step 2"/>
    </form>
</div>

<div class="tab-pane fade clearfix tabs hide" id="step2" role="tabpanel" aria-labelledby="profile-tab">
        <form method="post">
            <h6>Payment method</h6>
            <div class="form-group">
                <div class="form-check">
                    <input class="form-check-input" type="radio" name="paymentmethod1" value="option1" checked>
                    <label class="form-check-label d-flex align-items-center" for="exampleRadios1">
                        <span class="mr-auto">payment method 1</span>
                    </label>
                </div>
                <br>
                <div class="form-check">
                    <input class="form-check-input" type="radio" name="credit_card" value="option1">
                    <label class="form-check-label d-flex align-items-center" for="exampleRadios1">
                        <span class="mr-auto">Stripe</span>
                    </label>
                </div>
            </div>
            <div class="text-right">
            <button type="button" href="#step3" data-toggle="tab" role="tab"
                    class="btn btn-outline-primary prev-step">
                Go back to step 2
            </button>
            <button type="button"  data-nexttab="#step3" href="#step3"
                    class="btn btn-primary btn ml-2 next-step">
                Go to step 3
            </button>
            </div>
        </form>
    </div>

    // ajax in payment.blade.php
    $('#goToStep2').on('click', function (event) {
        event.preventDefault();

        var custom_form = $("#" + page_form_id);

        $.ajax({
            method: "POST",
            url: '{{    route('products.storeUserInfo',compact('id','slug') ) }}',
            data: custom_form.serialize(),
            datatype: 'json',

            success: function (data, textStatus, jqXHR) {
                setTimeout(function () {

                }, 3000);
            },
            error: function (data) {
                console.log(data);
                var errors = data.responseJSON;
                var errorsHtml = '';
                $.each(errors['errors'], function (index, value) {
                    errorsHtml += '<ul class="list-group"><li class="list-group-item alert alert-danger">' + value + '</li></ul>';
                });

                $('#response').show().html(errorsHtml);
            }
        });

        });
    });

用户信息
{{csrf_field（）}}
名称
付款方式
付款方式1


条纹
返回步骤2
转至步骤3
//payment.blade.php中的ajax
$（'goToStep2'）。在（'click'，函数（事件）{
event.preventDefault（）；
var custom_form=$（“#”+页面_form_id）；
$.ajax({
方法：“张贴”，
url:“{route（'products.storeUserInfo'，compact（'id'，'slug'））}”，
数据：自定义表单.serialize（），
数据类型：“json”，
成功：函数（数据、文本状态、jqXHR）{
setTimeout（函数（）{
}, 3000);
},
错误：函数（数据）{
控制台日志（数据）；
var errors=data.responseJSON；
var errorsHtml=''；
$.each（错误['errors']，函数（索引，值）{
errorsHtml+='
'+value+'
；
});
$（'#response'）.show（）.html（errorsHtml）；
}
});
});
});

//payment.blade.php中的ajax

$('#goToStep2').on('click', function (event) {
        event.preventDefault();

        var custom_form = $("#" + page_form_id);

        $.ajax({
            method: "POST",
            url: '{{    route('products.storeUserInfo',compact('id','slug') ) }}',
            data: custom_form.serialize(),
            datatype: 'json',

            success: function (data, textStatus, jqXHR) {
                setTimeout(function () {

                }, 3000);
            },
            error: function (data) {
                console.log(data);
                var errors = data.responseJSON;
                var errorsHtml = '';
                $.each(errors['errors'], function (index, value) {
                    errorsHtml += '<ul class="list-group"><li class="list-group-item alert alert-danger">' + value + '</li></ul>';
                });

                $('#response').show().html(errorsHtml);
            }
        });

        });
    });

$（'goToStep2'）。在（'click'，函数（事件）{
event.preventDefault（）；
var custom_form=$（“#”+页面_form_id）；
$.ajax({
方法：“张贴”，
url:“{route（'products.storeUserInfo'，compact（'id'，'slug'））}”，
数据：自定义表单.serialize（），
数据类型：“json”，
成功：函数（数据、文本状态、jqXHR）{
setTimeout（函数（）{
}, 3000);
},
错误：函数（数据）{
控制台日志（数据）；
var errors=data.responseJSON；
var errorsHtml=''；
$.each（错误['errors']，函数（索引，值）{
errorsHtml+='
'+value+'
；
});
$（'#response'）.show（）.html（errorsHtml）；
}
});
});
});

我不确定，但我认为您必须为错误添加值[0]，而不是值。试试这个也许会有帮助：

    error: function (data) {
    var json = data.responseJSON;
    if (json) {
       var errors = json.errors;
        var errorsHtml = '<ul class="list-group">';
        $.each(errors, function (index, value) {
        errorsHtml += '<li class="list-group-item 
        alert alert-danger">' + value[0] + '</li>';
    });
    errorHtml+='</ul>';
    $('#response').show().html(errorsHtml);
    }
 }

---

“网络”选项卡中出现了什么错误？当您在控制台中记录custom_form.serialize（）时，您在控制台中看到了什么？您是否在顶部导入了验证器facade？在控制台中写入“console.log（custom_form.serialize（）”，它会导致：VM2208:1未捕获引用错误：custom_form未在：1:13定义。请尝试逐个发送$（'input'）.Val（），因为我认为问题在于发送的数据。谢谢，我可以使用“var buyer_name=$（'name”）=“buyer_name”]'）.val（）；”，以及其他一些字段，但如何将所有这些字段添加到ajax数据选项中？数据：{name:value，name:value}谢谢，但问题相同。正如您所提到的，您会得到422个错误。这意味着您有验证错误。因此，可能代码的另一部分有错误。我检查了我自己的代码，正如我所期望的那样对我有效。因此，请在$each之后记录errorsHtml，并查看其内容。请用错误函数完全替换上面的代码。我发现您将每个错误插入单独的ul中。我不认为这是主要原因，但我已经解决了。console.log（errorsHtml）显示“

”。

 public function storeUserInfo(Request $request, $id, $slug = null){

    $this->validate($request,[

        'buyer_name' => 'required|max:1|string',
        'buyer_surname' => 'required|max:255|string',
        'buyer_email' => 'required|max:255|string',
        'name_invoice' => 'required|max:255|string',
        'country_invoice' => 'required|max:255|string',
   ]);

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