Topic: invalidFeedback & Laravel Validation Issue

Tenarius free asked 4 years ago

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-section .invalid-feedback").html("");
$("#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 =; =[0] =[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.

    label="Your Name" 


Magdalena Dembna staff answered 4 years ago

You don't need to use jQuery and set invalid message by hand - you can use custom validation instead:

  <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"/>
    <mdb-btn type="submit">Submit form</mdb-btn>
  import { mdbBtn, mdbInput } from "mdbvue";

  export default {
    components: {
    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;


Tenarius free commented 4 years ago

Thank you, this works for me!

Please insert min. 20 characters.


Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.



Specification of the issue

  • ForumUser: 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