尝试通过 AJAX 验证 Laravel 表单时出现错误 422

Posted 2023-02-24

【中文标题】尝试通过 AJAX 验证 Laravel 表单时出现错误 422

【英文标题】：Error 422 when trying to validate Laravel Form via AJAX

【发布时间】：2018-11-03 03:05:06

【问题描述】：

我一直在尝试使用 Larave 的 Validator 类。正常提交表单时我可以让它工作，但是当我通过 AJAX 提交时出现错误：

POST http://localhost/dashboard 422 (Unprocessable Entity)

即使我尝试了我的表单的简单版本：

<div class="container">
    <div class="row justify-content-center">
        <div class="col-6">
            @if ($errors->any())
                @foreach($errors->all() as $error)
                    <div>
                         $error 
                    </div>
                @endforeach
            @endif
            <form action="/dashboard" method="post" id="test-form"> 
                @csrf
                <input type="text" name="name" id="name" />
                <input type="submit">
            </form>
        </div>
    </div>
</div>

<script>
    $('#test-form').on('submit', function(e)
    
        e.preventDefault();
        $.post($(this).attr('action'), $(this).serialize())
        .fail(function(data)
        
            console.log(data);
        )
        .done(function(res)
        
            alert('done');
        );
    );
</script>

我的控制器：

<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
class DashboardController extends Controller

    public function index()
    
        return view('dashboard');
    

    public function test(Request $request)
    
        $validateData = $request->validate(['name' => 'required']);

        echo 'submitted';
    

目标是提交表单，但现在我只想通过 AJAX 请求返回错误。我正在使用 Laravel 5.6。

当我收到错误消息时，Console.log 会打印出来，并且状态测试显示为不可处理实体。

编辑：这是来自我的控制台日志的数据：

readyState: 4, getResponseHeader: ƒ, getAllResponseHeaders: ƒ, setRequestHeader: ƒ, overrideMimeType: ƒ, …
abort
:
ƒ ( statusText )
always
:
ƒ ()
catch
:
ƒ ( fn )
done
:
ƒ ()
fail
:
ƒ ()
getAllResponseHeaders
:
ƒ ()
getResponseHeader
:
ƒ ( key )
overrideMimeType
:
ƒ ( type )
pipe
:
ƒ ( /* fnDone, fnFail, fnProgress */ )
progress
:
ƒ ()
promise
:
ƒ ( obj )
readyState
:
4
responseJSON
:
errors
:
name: Array(1)
message
:
"The given data was invalid."
__proto__
:
constructor
:
ƒ Object()
hasOwnProperty
:
ƒ hasOwnProperty()
isPrototypeOf
:
ƒ isPrototypeOf()
propertyIsEnumerable
:
ƒ propertyIsEnumerable()
toLocaleString
:
ƒ toLocaleString()
toString
:
ƒ toString()
valueOf
:
ƒ valueOf()
__defineGetter__
:
ƒ __defineGetter__()
__defineSetter__
:
ƒ __defineSetter__()
__lookupGetter__
:
ƒ __lookupGetter__()
__lookupSetter__
:
ƒ __lookupSetter__()
get __proto__
:
ƒ __proto__()
set __proto__
:
ƒ __proto__()
responseText
:
""message":"The given data was invalid.","errors":"name":["The name field is required."]"
setRequestHeader
:
ƒ ( name, value )
state
:
ƒ ()
status
:
422
statusCode
:
ƒ ( map )
statusText
:
"Unprocessable Entity"
then
:
ƒ ( onFulfilled, onRejected, onProgress )
__proto__
:
Object

【问题讨论】：

您可以从控制台日志中发布data 吗？

【参考方案1】：

当发出 Ajax 请求并出现验证错误时，Laravel 会返回 422 响应。检查浏览器控制台中的响应 - 它应该向您显示 JSON，其中包含您的请求的验证错误。您发布到 Laravel 的 jQuery 代码很可能没有按照您期望的方式发送表单属性。

【讨论】：

好的，那么这很正常，只要我的 JSON 错误存在，我就不应该担心错误，只需解析响应即可？

谢谢。通过忽略错误，我能够正确地取出我的数据。