Level 35
Can you show where you are validating the request?
Nov 6, 2022
7
Level 7
Failed to load resource: the server responded with a status of 422 (Unprocessable Content)
trying to post a note with contact_id, here is my code:
data() {
return {
note: {
note: "",
contact_id: "",
},
};
},
methods: {
async addNote() {
this.note = {
note: this.note.note,
contact_id: this.$route.params.id,
};
try {
console.log("NOTE: ", this.note);
// axios.post("note", this.note).then(() => {
// Swal.fire({
// title: `Successfully added`,
// text: ` ${this.note.note} has been added!`,
// icon: "success",
// });
// this.$emit("addedNote", this.note);
// // this.clearFields();
// });
} catch (error) {
console.log("ERROR: ", error);
}
},
},
this is what is logged in the console:
Proxy {note: 'test note', contact_id: '9'}
If I attempt to post it by un commenting the code for the axios post, I get:
Failed to load resource: the server responded with a status of 422 (Unprocessable Content)
Level 7
this is my page:
<template>
<div>
<Form @submit="addNote">
<div class="my-4">
<label for="First Name"
>Note <span class="text-red-700">*</span></label
>
<Field
name="note"
type="text"
placeholder="Add a note"
v-model="note.note"
class="w-full rounded border-2 border-gray p-2"
:rules="isRequired"
/>
<ErrorMessage class="text-red-700 font-bold" name="note" />
</div>
<div class="my-4">
<AppButton type="secondary" class="rounded border-2 border-gray p-2">
Add Note
</AppButton>
</div>
</Form>
</div>
</template>
<script>
import axios from "axios";
import AppButton from "@/components/AppButton.vue";
import { Form, Field, ErrorMessage } from "vee-validate";
export default {
name: "ContactNote",
components: {
AppButton,
Form,
Field,
ErrorMessage,
},
data() {
return {
note: {
note: "",
contact_id: "",
},
alertText: "",
alertClasses: "",
alertShow: "",
};
},
methods: {
async addNote() {
this.note = {
note: this.note.note,
contact_id: this.$route.params.id,
};
try {
console.log("NOTE: ", this.note);
axios.post("note", this.note).then(() => {
Swal.fire({
title: `Successfully added`,
text: ` ${this.note.note} has been added!`,
icon: "success",
});
this.$emit("addedNote", this.note);
// this.clearFields();
});
} catch (error) {
console.log("ERROR: ", error);
}
},
},
};
</script>
Level 7
in the Network tab I get:
{"message":"The first name field is required.","errors":{"first_name":["The first name field is required."]}}
it's a Vee-validate error but first_name is not being used in this component
Level 35
@boyjarv I'm pretty sure this is a server side validation error rather than vee-validate.
Level 35
Look in your controller where you are creating the note. Do you see something like this?
$request->validate([
'first_name' => 'required'
]);
If so remove it. If not, are you sure your router isn't directing your request to a different controller?
1 like
Level 7
sorted, it was a problem with my API
Level 35
@boyjarv glad to hear it
Please or to participate in this conversation.