在 ajax 中捕获 laravel 验证异常

Posted 2023-02-19

【中文标题】在 ajax 中捕获 laravel 验证异常

【英文标题】：Catch a laravel validation exception in ajax

【发布时间】：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>

【问题讨论】：

你想要的结果是什么？

在上面的查看代码中，有 标签带有错误消息类，我需要在输入下方显示相应的错误消息

【参考方案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 在一个页面中不能出现多次。