在 ajax 中捕获 laravel 验证异常答案

【问题标题】：Catch a laravel validation exception in ajax在 ajax 中捕获 laravel 验证异常
【发布时间】：2021-04-02 03:14:35
【问题描述】：

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>

【问题讨论】：

你想要的结果是什么？
在上面的查看代码中，有标签带有错误消息类，我需要在输入下方显示相应的错误消息

标签： jquery ajax laravel

【解决方案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>`);
}

当然，你应该根据自己的需要改变它。

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

【讨论】：