javascript - Error 422 when trying to validate Laravel Form via AJAX - Stack Overflow

admin 管理员组

文章数量: 1086019

I have been trying to use Larave's Validator class. I can get it to work when submitting a form normally, but when I submit via AJAX I get an error:

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

Even when I try the simple version of my form:

<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>

My Controller:

<?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';
    }
}

The goal is to submit a form, but for right now I just want the errors to be returned through an AJAX request. I am using Laravel 5.6.

When I get the error, the Console.log does print out, and the Status Test is what is showing as Unprocessable Entity.

Edit: Here is the data from my 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

I have been trying to use Larave's Validator class. I can get it to work when submitting a form normally, but when I submit via AJAX I get an error:

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

Even when I try the simple version of my form:

<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>

My Controller:

<?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';
    }
}

The goal is to submit a form, but for right now I just want the errors to be returned through an AJAX request. I am using Laravel 5.6.

When I get the error, the Console.log does print out, and the Status Test is what is showing as Unprocessable Entity.

Edit: Here is the data from my 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

• javascript
• php
• jquery
• laravel
• validation

Share Improve this question Follow edited May 24, 2018 at 2:49 Ron Butcher asked May 24, 2018 at 2:18 Ron ButcherRon Butcher 52911 gold badge99 silver badges1818 bronze badges 1

• Can you post the data from your console log? – lufc Commented May 24, 2018 at 2:32

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 7

A 422 response is returned by Laravel when an Ajax request is made and has validation errors. Inspect the response in your browser's console - it should show you JSON that includes the validation errors with your request. It's likely that your jQuery code to post to Laravel isn't sending the form attributes the way you expect.

本文标签： javascriptError 422 when trying to validate Laravel Form via AJAXStack Overflow