jquery - 尝试在 axios 中显示 Laravel 验证错误

Question

我正在尝试使用 axios 在我的应用程序中显示从 laravel 验证中获取的错误，但它一直显示此错误。 Controller 验证用户和任何未填写的字段。它将返回一个错误，该错误将使用 axios 显示在页面上。

错误:

VM12049:87 Uncaught (in promise) TypeError: Cannot read property '0' of undefined
at <anonymous>:87:80
(anonymous) @ VM12049:87
XMLHttpRequest.send (async)
(anonymous) @ VM12045:8
e.exports @ VM12045:8
e.exports @ VM12045:8
Promise.then (async)
r.request @ VM12045:8
r.<computed> @ VM12045:8
(anonymous) @ VM12045:2
updateProfile @ VM12049:68
(anonymous) @ VM12049:32
dispatch @ VM12044:2
v.handle @ VM12044:2

我的代码

axios 代码

  axios.post('/update-student-info', data, {
        "x-csrf-token": $("[name=_token]").val(),
        'content-type': 'multipart/form-data'
    })
        .then(response => {
            if (response.status === 200) {
                Swal.fire({
                    title: 'Information Updated',
                    text: '',
                    icon: 'success',
                    confirmButtonText: 'continue',
                    allowOutsideClick: false
                })
                $("#profile").val("");
                $("#update").text("Update");

            }
        }).catch(error => {

        first_name_error.text(error.response.data.errors.first_name[0]);
        last_name_error.text(error.response.data.errors.last_name[0]);
        phone_error.text(error.response.data.errors.phone[0]);
        fac_id_error.text(error.response.data.errors.fac_id[0]);
        dept_id_error.text(error.response.data.errors.dept_id[0]);
        console.log(error.response.data.errors);

    }).finally(() => {
        $("#profile_updates").html('Update');

    });

Controller 代码

    public function updateStudentInfo(Request $request){
    $request->validate(
         [
            'first_name' => 'required|string|max:50',
            'last_name' => 'required|string|max:50',
            'phone' => 'required',
            'fac_id' => 'required',
            'dept_id' => 'required'
        ],[
        'fac_id.required' => 'This Field is required',
        'dept_id.required' => 'This Field is required'
    ]);

    try {

            OtherInstitutionStudents::where('email', Auth::user()->email)->update([
                'first_name' => $request->get('first_name'),
                'last_name' => $request->get('last_name'),
                'phone' => $request->get('phone'),
                'institution_id' => $request->get('fac_id'),
                'institution_level' => $request->get('dept_id')
            ]);

    } catch (ValidationException $e) {
        return response()->json([
            'status' => 'error',
            'msg' => 'error',
            'errors' => $e->errors()
        ], 422);
    }
    return response()->json($request->all());

}

我该怎么办？。

Answer 1

您假设每个字段都会出现错误，但情况可能并非如此。所以这段代码:

first_name_error.text(error.response.data.errors.first_name[0]);
last_name_error.text(error.response.data.errors.last_name[0]);
phone_error.text(error.response.data.errors.phone[0]);
fac_id_error.text(error.response.data.errors.fac_id[0]);
dept_id_error.text(error.response.data.errors.dept_id[0]);

大概应该修改为:

if (error.response.data.errors.first_name) {
   first_name_error.text(error.response.data.errors.first_name[0]);
}
if (error.response.data.errors.last_name) {
   last_name_error.text(error.response.data.errors.last_name[0]);
}
if (error.response.data.errors.phone) {
   phone_error.text(error.response.data.errors.phone[0]);
}
if (error.response.data.errors.fac_id) {
   fac_id_error.text(error.response.data.errors.fac_id[0]);
}
if (error.response.data.errors.dept_id) {
   dept_id_error.text(error.response.data.errors.dept_id[0]);
}