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

时间:2018-05-24 02:18:19

标签: javascript php jquery laravel validation

我一直在尝试使用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会打印出来,状态测试显示为Unprocessable Entity。

编辑:以下是我的控制台日志中的数据:

{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

1 个答案:

答案 0 :(得分:2)

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