Laravel validation error not returning as json response

Question

When trying to catch my Laravel validation errors using javascript, it keeps giving me the data in html format rather than json format, my validation looks normal. note i am using vue.js 3 and if the validation passes the actual method in the controller works fine, this is just a validation catching issue.

$request->validate([
       'first_name' => ['required', 'string', 'min:3', 'max:255'],
       'last_name' => ['required', 'string', 'min:3', 'max:255'],
       'email' => ['required', 'email', 'min:3', 'max:255'],
       'message' => ['required', 'string', 'min:3']
   ]);

my fetch method is as follows:

fetch('/contact-us', {
            method: 'POST',
            headers: {
                'CONTENT-TYPE': 'application/json'
            },
            body: JSON.stringify(this.form)
        }).then((response) => response.text())
            .then((data) => {
                console.log(data);
                //data = JSON.parse(data);
            }).catch(function(error) {
            console.log('Error: ' + error);
        });

my web route is:

Route::post('/contact-us', [IndexController::class, 'contactForm']);

the error in html format is:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
<link href="/css/app.css" rel="stylesheet" />
<script src="/js/app.js" defer></script>
</head>
<body>
<style>
body{
    margin: 0 !important;
    overflow-x: hidden;
}
.container {
    padding-top: 20px;
}
</style>
<div id="app" data-page="{&quot;component&quot;:&quot;ContactUs&quot;,&quot;props&quot;:{&quot;errors&quot;:{&quot;email&quot;:&quot;The email must be a valid email address.&quot;},&quot;csrf&quot;:&quot;tFYwkcZZhNfeb2WXDwdnSv4dchujDvSvLfFGhHW1&quot;},&quot;url&quot;:&quot;\/contact-us&quot;,&quot;version&quot;:&quot;0f4e2ee0f7e2ca9da665d2f8035743df&quot;}"></div></body>

It's probably a token issue. Do you use Sanctum to authenticate your frontend app? — Bulent
– Bulent, Commented Feb 19, 2022 at 18:21
Its not an api, the site also has no login system. I have got it to work using the manual validation class and returning the json response manually, however this is not a good approach as it makes the controller look messy. — sgb999
– sgb999, Commented Feb 19, 2022 at 18:42

Ilya webdev · Accepted Answer · 2022-10-17 20:11:56Z

12

If you specify the Accept:application/json header in request, laravel will return json response

answered Oct 17, 2022 at 20:11

Ilya webdev

1611 silver badge4 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Hillcow Mar 6 at 13:59

Nope, not working for me.

dipi evil Jul 15 at 14:13

Helped me! I was using '/' as Accept.

medilies · Accepted Answer · 2022-02-19 19:26:16Z

9

If validation fails during a traditional HTTP request, a redirect response to the previous URL will be generated.

If the incoming request is an XHR request, a JSON response containing the validation error messages will be returned.

First I suppose that /contact-us is a Web route and not an API route.

The $request->validate() default behavior on failure is to redirect you to the previous Web route with MessageBag.

To prevent that default behaviour, you need to wrap the validation process in a try-catch block and catch the Illuminate\Validation\ValidationException Exception and return error messages from [IndexController::class, 'contactForm'].

The the error messages array will automatically get converted to a JSON response.

try {
    $request->validate([
        'first_name' => ['required', 'string', 'min:3', 'max:255'],
        'last_name' => ['required', 'string', 'min:3', 'max:255'],
        'email' => ['required', 'email', 'min:3', 'max:255'],
        'message' => ['required', 'string', 'min:3']
    ]);
} catch (\Illuminate\Validation\ValidationException $th) {
    return $th->validator->errors();
}

Example respone:

{
    "first_name": [
        "first name field is required."
    ],
    "last_name": [
        "last name field is required."
    ],
    "email": [
        "L'E-mail field is required."
    ],
    "message": [
        "message field is required."
    ]
}

edited Feb 19, 2022 at 19:26

answered Feb 19, 2022 at 19:04

medilies

2,2981 gold badge15 silver badges39 bronze badges

4 Comments

sgb999 Over a year ago

is there a way to swap it from XHR to fetch or add fetch to it?

medilies Over a year ago

@sgb999 when the documentation says XHR request that implicitly refers to JS fetch API that you used. Saying "I used XHR" or "I used the fetch API" can be used interchangeably. I guess that it is more interesting for to aim for using API routes instead of Web routes with your VueJS frontend

medilies Over a year ago

Also, did you disable the VerifyCsrfToken middleware? Because I see that you didn't include any token in your fetch()

sgb999 Over a year ago

It’s included in the form object i send.

sgb999 · Accepted Answer · 2022-02-19 20:18:03Z

2

The laravel docs days the response is given a 422 which throws an error in the usual error catch block. This data can be extracted by adding this catch error to your json post request

.catch(error => {
            if (error.response.data.errors) {
                console.log(error.response.data.errors);
            }
        });

edited Feb 19, 2022 at 20:18

answered Feb 19, 2022 at 20:12

sgb999

791 gold badge2 silver badges9 bronze badges

Collectives™ on Stack Overflow

Laravel validation error not returning as json response

3 Answers 3

2 Comments

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related