为什么验证错误没有出现在“#response”div 中？ （而是出现 422 Unprocessable Entity）

Question

我正在尝试使用 jQuery anad AJAX 创建一个多步骤表单，并且我想使用 ajax 发布请求来验证每个步骤。但是当单击“转到第 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);
            }
        });

        });
    });

//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);
            }
        });

        });
    });

Answer 1

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

    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);
    }
 }

将您的控制器功能更改为：

 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);
}