Topic: invalidFeedback & Laravel Validation Issue
Problem: If the laravel-validation fails because no value is given in the form-field, everything works perfectly. But if it fails because the name-form-value is too long, the invalid feedback is not displayed.
My Question: What kind of influence do I have on the "invalidFeedback" so that it is displayed when I need it without writing further jQuery code like:
$("#form-name").removeClass("is-invalid");
$("#form-name-section .invalid-feedback").html("");
$("#form-name").addClass("is-invalid");
$("#form-name-section .invalid-feedback").html(errormessage);
Here is my code:
I can validate my incoming data in Laravel and, depending on the error, send various error messages back to the front end.
$data = request()->validate([
'name' => 'bail|required|min:3|max:128',
'email' => 'required|email',
'message' => 'required',
'privacy' => 'accepted'
]);
In response I get an object with the error notifications in vue-axios.
{
name: ["My Error Message"],
email: ["My Error Message"],
message: ["My Error Message"],
privacy: ["My Error Message"]
}
I save this in my prepared vue-error-data-object.
errors: {
name: "",
email: "",
message: "",
privacy: "",
}
And so.
let errors = e.response.data.errors;
this.errors.name = errors.name[0]
this.errors.email = errors.email[0]
this.errors.message = errors.message[0]
this.errors.privacy = errors.privacy[0]
Now I use the mdb-invalidFeedback and simply insert the error message.
<mdb-input
label="Your Name"
v-model="fields.name"
:invalidFeedback="errors.name"
required
/>
Regards
Magdalena Dembna staff premium answered 5 years ago
You don't need to use jQuery and set invalid message by hand - you can use custom validation instead: https://mdbootstrap.com/docs/vue/forms/validation/#custom-validation
<template>
<form novalidate @submit.prevent="checkForm" class="m-5">
<div class="form-row">
<div class="col-md-4">
<mdb-input type="text" v-model="field.value" required invalid-feedback="error" :custom-validation="field.validated" :is-valid="field.isValid"/>
</div>
</div>
<mdb-btn type="submit">Submit form</mdb-btn>
</form>
</template>
<script>
import { mdbBtn, mdbInput } from "mdbvue";
export default {
components: {
mdbBtn,
mdbInput
},
data() {
return {
field: {
value: '',
isValid: false,
validated: false
},
}
},
methods: {
checkForm(event) {
if (this.field.value.length < 4) {
this.field.isValid = false;
}
else {
this.field.isValid = true;
}
this.field.validated = true;
}
}
};
</script>
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Resolved
- User: Free
- Premium support: No
- Technology: MDB Vue
- MDB Version: 6.7.1
- Device: PC
- Browser: Firefox
- OS: Windows 10
- Provided sample code: No
- Provided link: No