在ajax中捕获laravel验证异常

Question

此api返回以下错误。如何处理ajax中的name.0和name.1等，并在表单中的相应输入下显示。

errors: {name.0: ["The name.0 has already been taken."], 
name.1: ["The name.1 has already been taken."]}

ajax：

$.ajax({
    type: "POST",
    url: basePath + "urlHere",
    data: form_data,
    success: function (data) {
        ..... .....
        ..... .....
    },
    error: function (jqXHR, textStatus, errorThrown) {
        var errors = $.parseJSON(jqXHR.responseText);
        console.log('errcheck',  errors.errors['name.0']); //1st input err
        console.log('errLength',  errors.errors.length); //undefined
        if (typeof errors.errors['name.0'] !== 'undefined') { //how to run a loop here?
            $('form#add-form').find('.error-message').each(function () {
                $(this).empty().hide();
            });
            $('form#add-form').find('.error-message').empty()
                .append('<i class="fa fa-info-circle"></i>' + errors.errors['name.0']);
            $('form#add-interest-type-form').find('.error-message').show();
        }
    },
    complete: function () {
        ...... .....
        ..... .....
    }
});

验证：

$request->validate([
    'group' => 'required',
    'name' => [
        'required', Rule::unique('group_tbl')->where(function ($query) use ($request){
            $query->where('group', $request->get('group')); 
        })
    ]
]);

查看：

<input name="group" placeholder="group here" required >
<input name="name[]" placeholder="name here" required >
<small class="error-message" id="title_err" style="display: none;"></small>
<input name="name[]" placeholder="name here" > //added by js but for simplicity added here manually
<small class="error-message" id="title_err" style="display: none;"></small>

Answer 1

您希望使用jqXHR.responseJSON而不是jqXHR.responseText。

错误回调的实现示例：

function (jqXHR, textStatus, errorThrown) {
    const data = jqXHR.responseJSON;

    let html = '';

    if (data.errors) {
        const errors = Object.values(data.errors).map(messages => messages[0]);
        html = errors.map(error => `<li>${error}</li>`);
    } else if (data.message) {
        html = `<li>${data.message}</li>`;
    }

    $("#title_err").html(`<ul>${html}</ul>`);
}

当然，您应该根据自己的需要进行更改。

顺便说一下:你在你的title_err代码中重复了两次HTML。您应该删除其中一个，因为id不能在一个页面中出现多次。