Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.
Am getting this 422 (Unprocessable Entity) error while trying to do a POST request using Laravel and Vue-resource. I currently have the following codes: **My Controller **
$this->validate($request, [
'title' => 'required|unique:projects,title',
'description' => 'required'
]);
$project = [
'title' => $request->input('title'),
'description' => $request->input('description')
];
return $project->save();
My Main.js
createProject() {
let project = this.newProject;
this.projects.push(project);
this.newProject = {
title: '',
description: ''
};
this.$http.post('api/projects').then(function(response) {
console.log(response.data);
}, function (response) {
console.log(response.data);
});
}
How can I go about resolving this error.
Hi mezie,
It looks like you aren't passing your data with the request.
this.$http.post('api/projects', project).then(function (response) {
console.log(response.data);
}, function (response) {
console.log(response.data);
});
@UnraveledMnd already tried that end up with the same error
422 should not be seen as an "error", it's simply the response code laravel returns when validation fails. If you were to inspect the element in lets say firebug, you would see the validation rules there of the failed request.
@Qlic Thanks, but how do I catch and show the error messages just like on a non-ajax submission.
First, pass your form data in your Ajax call, but even then, you'll get the validation error (422) because you're requiring a title and a description but your form is passing "project-title" and "project-description", so you're failing on the "required" validation.
To "catch" and show the errors, you could have a data variable in your component named "formError" that is initialized to an empty string, then in the error function of your Ajax call, you could set the value of that variable from the response, then have an error div that is shown conditionally depending on the "formError" variable being set.
In chrome dev tools you can expand the console log object. Should show you the Json data and error messages for failing validation.
Also under network tab you can click on the red request, preview tab will show the returned data also.
@clay Actually my form fields and the validation rules are the same, while pasting the code here I told out some part and forgot to update the remaining as appropriate.
Anyways, irrespective of the form fields and validation rules, the validation always fail on Ajax submission but works well with non-ajax submission.
What is the value of project before the ajax call?
console.log(project);
this.$http.post('api/projects', project).then(function (response) {
console.log(response.data);
}, function (response) {
console.log(response.data);
});
Resolved! Turns out that my form fields names, validation rules and v-model binding must have the same value(names).
this.$http.post('api/projects', project).then(function (response) {
console.log(response.data);
}, function (error) {
console.log(error.response.data); <--- Go down one more stream @mezie.
});
@kerranm Don't bump something that's 7 months old man. It's already been resolved.
@kerranm Thanks man. This is the answer i was looking for for about 1 month! Thanks a lot. This should be the accepted answer.
the confusing part is that when you console.log(error), the chrome console shows it as a string,
but console.log(error.response.data) shows the object.
@kerranm thanks for posting this here !!! it worked for me :)
Exactly, This answer Solved my Query. Thank you Mr.KERRANM
Please or to participate in this conversation.